Question

当用户在表格行中单击时，我正在尝试激活表格行复选框。每行都有一个复选框。

我有以下代码，可以作为标准版本使用。

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

表I中我试图添加它的数据有各种类型，即有创建弹出窗口的图像，创建工具提示的链接和重定向到另一个页面的链接。我遇到的问题是，在点击链接，图像等时，勾选相应的复选框。

有什么想法吗？

Answer 1

传播是这里的问题。单击图像或链接时，该事件会通过祖先冒泡并在到达<tr>元素时触发单击处理程序。 event.target 将引用原始点击的元素。您应该更加具体地说明您允许或禁止的“类型”。例如：

$('.scrollTable tr').click(function(event) {
    if(event.target.tagName == 'TD') {
        $(':checkbox', this).trigger('click');
    }
});

使用对象地图禁止<a>，<img>和<input>的示例：

$('.scrollTable tr').click(function(event) {
    var disallow = { "A":1, "IMG":1, "INPUT":1 }; 
    if(!disallow[event.target.tagName]) {
        $(':checkbox', this).trigger('click');
    }
});

Answer 2

您可能需要查看event.stopPropagation - 这应该会阻止事件冒泡到复选框

Answer 3

这应该有效：

$('.scrollTable tr').click(function(event) {
    var $this = $( event.currentTarget );

    if( $this.is( 'tr' ) )
    {
        $(':checkbox', this).trigger('click');
    }
});

jQuery检测onClick发生的元素

3 个答案: