CODEWITHSUNDEEP
javascriptajaxevent-handlingkeydown
ui-unicorn.co.uk
ui-unicorn.co.uk

Reputation: 151

Enable and disable onkeydown event?

Hi I am trying to start off with the keys enable and then once a button is clicked to disable the event this so far works fine, then once the close button is pressed I want to enable the event again this part doesn't work I'd like to solve this using javascript if possible my close button is in another html (project1.html) file and is loaded via Ajax here is my code: 

var enable_keydown = document.onkeydown;

$(".open-project").click(function(){
document.onkeydown = null;
});

$("#project_close").click(function(){
document.onkeydown = enable_keydown;
});


document.onkeydown = function(e) {
    switch (e.keyCode) {
        case 37:
             $.fn.fullpage.moveSectionUp();
            break;
        case 38:
             $.fn.fullpage.moveSectionUp();
            break;
        case 39:
             $.fn.fullpage.moveSectionDown();
            break;
        case 40:
             $.fn.fullpage.moveSectionDown();
            break;
    }
};

Kind Regards

Upvotes: 2

Views: 6102

Answers (4)

Jānis
Jānis

Reputation: 1812

To remove event listener your function can't be anonymous so that you can reference it later. So define your function:

function moveSection(e) {
    switch (e.keyCode) {
        case 37:
        case 38:
             $.fn.fullpage.moveSectionUp();
            break;
        case 39:
        case 40:
             $.fn.fullpage.moveSectionDown();
            break;
        default:
            break;
    }
}

Add it to event listener:

$(".open-project").click(function(){
    document.addEventListener('keydown', moveSection);
});

And remove it: 

$("#project_close").click(function(){
    document.removeEventListener('keydown', moveSection);
});

See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener and https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

What you are doing here

var enable_keydown = document.onkeydown;

$("#project_close").click(function(){
    document.onkeydown = enable_keydown;
});

boils down to document.onkeydown = document.onkeydown which doesn't make sense.

Upvotes: 2

JSmith
JSmith

Reputation: 4808

Click on the close div and assign keydown function Click on the open deletes the keydown function from document.onkeydown.

function moveFunc(e) {
            alert(e.keyCode);
    };

$(".open-project").click(function(){
    document.onkeydown = null;
});

$("#project_close").click(function(){
    document.onkeydown = moveFunc;
});
.open-project{
  background-color: red;
  width: 150px;
  height: 150px;
  }
  
 #project_close{
  background-color: green;
  width: 150px;
  height: 150px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project" >open project</div>
<div id="project_close" >project close</div>

Upvotes: 1

EnemySkill
EnemySkill

Reputation: 57

To do this, I would change your disable handler to this:

$(".open-project").click(function(){
  $(document).on('keydown', function(e) { e.preventDefault(); });
});

And for the re-enable handler do this:

$("#project_close").click(function(){
  $(document).off('keydown');
});

The on() function binds the keydown event to basically stop the event from occurring, and the off() function restores the default keydown functionality. You can refer to the jQuery documentation for those functions here:

http://api.jquery.com/on/

http://api.jquery.com/off/

Upvotes: 1

Francesco Fiore
Francesco Fiore

Reputation: 91

You can use a flag variable or use bind and unbind functions.

Also checkout this question :

bind and unbind event in jquery

Upvotes: 0

Related Questions