Convert event listener from jQuery to native Javascript

Question

I want to remove the requeriment of jQuery in my app and I have this piece of code that handles an event related to a element.

So the original code is:

$(window.document).on('contextmenu', '.main td.active', function(e) {
    $("#context-menu").hide().css({
        left: e.pageX,
        top: e.pageY
    }).show();
    e.preventDefault();
});

The migration is the following:

window.document.addEventListener('contextmenu', function(e) {
    var el = document.getElementById("context-menu").style;
    el.left = e.pageX,
    el.top = e.pageY,
    el.display = 'block';
    e.preventDefault();
});

The problem is that the event (onContextmenu) is associated just only to the document.body ... then, when is fired, the event.target (mouse right-click) is checked to verify if matches with a .main td.active, instead of associate an event to each element.

(do not confuse with querySelector('.main td.active').addEventListener )

Any idea? Thanks!!

Test the event target to see if it has the .main class. if it doesn't then you should return undefined to let the default action happen. — user400654
– user400654, Commented Sep 21, 2015 at 18:48

kosmos · Accepted Answer · 2015-09-21 19:38:39Z

1

You can also assign the event directly to the target elements using loops. Something like:

jsFiddle

var parents = document.querySelectorAll('.main');
for( var i = 0; i < parents.length; i++ ){
     var target = parents[i].querySelectorAll('td.active');
     for( var j = 0; j < target.length; j++ ){
         target[j].oncontextmenu = function(e){
             e.preventDefault();
             // do stuff
        };
     }
 }

edited Sep 21, 2015 at 19:38

answered Sep 21, 2015 at 19:33

kosmos

4,2881 gold badge21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonas Sciangula Street Over a year ago

The problem is that the event (onContextmenu) is associated just only to the document.body ... then, when is fired, the event.target (mouse right-click) is checked to verify if matches with a .main td.active, instead of associate an event to each element

Joy Biswas · Accepted Answer · 2015-09-21 19:45:55Z

1

You can define a fn checkTarget() something like the jQuery sizzle one would do in case if you have a CSS selector to find and use querySelectorAll and call that if returns true then the target is your specified selector so execute your fn else do nothing

window.document.addEventListener('contextmenu', function(e) {
    if(checkTarget(this, e.target, '.main td.active')){
        el = document.getElementById("context-menu").style;
        el.left = e.pageX,
        el.top = e.pageY,
        el.display = 'block';
        e.preventDefault();
    }
});

function checkTarget(element, current, search){
   var matches = element.querySelectorAll(search);
   for(var i in matches){
      if(matches[i] === current){
          return true;
      }
   }
   return false;
}

edited Sep 21, 2015 at 19:45

answered Sep 21, 2015 at 18:52

Joy Biswas

6,5551 gold badge27 silver badges50 bronze badges

1 Comment

Jonas Sciangula Street Over a year ago

The problem is that the event.target could be a child element of element.main class

Collectives™ on Stack Overflow

Convert event listener from jQuery to native Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related