jQuery触发触发点击事件，但不发送事件数据

Question

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?

Answer 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.

Answer 2

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/