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

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

• javascript
• ajax
• event-handling
• keydown

Share Follow edited Jul 5, 2017 at 21:40 ui-unicorn.co.uk asked Jul 5, 2017 at 20:12 ui-unicorn.co.ukui-unicorn.co.uk 15111 gold badge55 silver badges1818 bronze badges 6

• Are you trying to prevent someone from clicking it multiple times before it pletes? If so, disable the button instead and reenable upon pletion. – Matt Commented Jul 5, 2017 at 20:15
• .project_close or #project_close – JSmith Commented Jul 5, 2017 at 20:15
• At the top you set enable_keydown to document.onkeydown, but you don't set document.onkeydown until the end, so enable_keydown is going to be null – Patrick Evans Commented Jul 5, 2017 at 20:16
• he/she is trying to copy into a variable the default onkeydown event – JSmith Commented Jul 5, 2017 at 20:19
• @JSmith, which is null, as there is no default event handler. They do not set the event handler until the bottom – Patrick Evans Commented Jul 5, 2017 at 20:20

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 2

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/en-US/docs/Web/API/EventTarget/addEventListener and https://developer.mozilla/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.

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./on/

http://api.jquery./off/

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open-project" >open project</div>
<div id="project_close" >project close</div>

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

Also checkout this question :

bind and unbind event in jquery