JS Always getting the same event object "e" parameter with mousedown

Question

I'm trying to handle a middle mouse button click event with JQuery on a DataTable (https://datatables.net/). Here is my code.

var tbl = document.getElementById("entries");
$(tbl).on('mousedown', function (e) { 
     e.preventDefault();
     if (e.which == 2) {
         var table = window.table_entries;
         var data = table.dataTable.row($(e.detail)).data();
         window.open("/plugin/Changes/@Model.Revision/" + data.BuildId, '_blank');
     }
});

I'm always getting the same BuildId (284), no matter where I click. How can I get the correct row?

I also have another code snippet, which works perfectly fine

tbl.addEventListener("cdt.click", function (e) {
        var table = window.table_entries;
        var data = table.dataTable.row($(e.detail)).data();
        window.open("/plugin/Changes/@Model.Revision/" + data.BuildId, '_blank');
        window.location("/plugin/Changes/@Model.Revision/" + data.BuildId);
 });

Thanks in advance!

score 0 · Answer 1 · answered Mar 14 '19 at 10:03

if you want to check de middle button click with jquery check this code

$("#foo").on('click', function(e) { 
  if( e.which == 2 ) {
  e.preventDefault();
  alert("middle button"); 
  }
});

From this question Triggering onclick event using middle click

And if you want to check downmouse you can check this other @KyleMit answer Detect middle button click (scroll button) with jQuery

P. Jerome · Answer 2 · 2019-03-14T11:11:14.627

@Jordi Jordi (because I can't comment right now) : Based on JQuery's documentation, click & mousedown both works.

$('h1').on('mousedown', function(e) {
    alert(e.which);
});

Will display 1 for LClick, 2 for Middle, 3 for RClick. But this isn't the question. If you're getting the same BuildId, it's because your selector isn't the good one.

If you're searching to get an exact row, you should change your selector like this :

$('td').on('mousedown', function (e) { 
    e.preventDefault();
    if (e.which == 2) {
        // Here you should get the row like this :
        var row = $(this).parent();
    }
});

Now it's your job to do what you want with this. The var "row" will contain the TR, meaning the row you just give a click.

EDIT : Note that your second code snippet doesn't include e.preventDefault(). Maybe it's the reason this second one works ?

JS Always getting the same event object "e" parameter with mousedown

2 Answers2