1

After searching for hours, I cannot seem to figure out why a jQuery triggered click event is not passing the actual event to the click function. Here is an example: jsfiddle.

$(document).ready(function () {
    $('tr').click(function (event) {
        if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger("click");
        }
    });

    $(':checkbox').click(function (event) {
        console.log(event.shiftKey);
    });
});

If I click the first checkbox, the console logs "false" as expected. Then, if I hold the shift key followed by checking the last checkbox, the console logs "true" as expected because as that box was clicked, shift was being held.

Now move over to the data and click on rows rather than checkboxes. Regardless of whether or not the shift key is being held as a row is clicked, the checkbox click event is fired, the box is checked/unchecked as appropriate, but event.shiftKey always returns false.

Why does triggering a click event from the row result in the originating event not being passed to the click handler?

justinvoelker
  • 543
  • 1
  • 8
  • 21

2 Answers2

1

simulating mouse click fully is not as straightforward as it seems. Here you can find detailed code for it (w/o using jQuery) : https://stackoverflow.com/a/6158050/405623

From functional point you could maybe have function you want to run on any click in row and inside define what kind of event it was. I mean get rid of generating events towards handling them in one place.

Syscall
  • 19,327
  • 10
  • 37
  • 52
shershen
  • 9,875
  • 11
  • 39
  • 60
0

You're triggering a new event on the checkbox, and not passing on the original. In that event, no shift is pressed. I would use a named function to avoid this confusion, like so:

$(document).ready(function () {
    $('tr').click(function (event) {
        console.log('Row clicked');
        eventHandler(event, this);
    });

    $(':checkbox').click(function (event) {
        event.stopPropagation();
        console.log('Checkbox clicked');
        eventHandler(event, this);
    });

    function eventHandler(event, elem){
        console.log(event.shiftKey);
        $(':checkbox', elem).click();
    }
});

Fiddle: http://jsfiddle.net/4hfwsh5q/7/

stopPropagation() also prevents the event from being passed further down when you click the checkbox, so a click on the row won't be triggered.

Update Here's another fiddle that only checks/unchecks the checkbox if shift is being held: http://jsfiddle.net/4hfwsh5q/8/

Kjell Ivar
  • 1,154
  • 8
  • 8
  • I like where this is headed. However, clicking on the row doesn't result in the check box being checked/unchecked. Seems I need to add a click trigger on the row but then I end up with two calls to the new function. – justinvoelker Feb 21 '15 at 20:51
  • I updated my fiddle, it should check the checkbox. But depending on what you want to do with the shift key check, then it might need further improvements – Kjell Ivar Feb 21 '15 at 21:00
  • Thanks KJell, it's almost working as I had hoped. The goal is to get the table to respond to clicks, ctrl+clicks, and shift-clicks the way we have all come to expect. I need to be able to know when a checkbox is clicked whether or not the shift key was held so I can check every box between the last and current one. So, your most recent fiddle is almost perfect but by when shift is held it's sending a true followed by a false since two events are firing. I'm trying to play with ordering now to see what I can come up with that works for my situation. – justinvoelker Feb 21 '15 at 21:07
  • You can check my last fiddle, in my update. Since what you're trying to do is a bit different than the default behaviour, i think it's ok to call preventDefault() and do the click magic yourself via elem.checked :) – Kjell Ivar Feb 21 '15 at 21:09
  • Even though I couldn't get this to work fully for my needs, this is the correct way to go about this. I was getting a 95% working solution following your help and perhaps someday I'll try it again. Unfortunately, I just have a lot of other code that plays into this that wasn't playing nicely with these sorts of changes. Thanks for the help! – justinvoelker Feb 22 '15 at 03:58