Question

我有两个相互矛盾的事件，我希望能够发挥作用。

我有一个HTML表格。表格中的第一列是一个按钮。这将打开n详细信息窗口。

我使用这些点击事件。

如果你想删除记录，这个是允许多行选择。

    $( "#vidlib_dtable tbody" ).on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    });

并且此事件是选择按钮单击以使您能够编辑记录（打开编辑窗口）

     $('#vidlib_dtable input[type="button"]').click(function() {
          var dtab = $('#vidlib_dtable').dataTable();
          var position = dtab.fnGetPosition(this); 
          var contactId = dtab.fnGetData(position)[9];
     });

如何点击按钮优先于行点击？

修改按钮的单击事件仍然不会触发。可能是一种不同的方式来召集活动？以下是在HTML表格中保存按钮的单元格示例

<td class="sorting_1 MMcol1">
    <div class="col1d">
        <button class="editBut"><img src="img/spanner.png"></button>
    </div>
</td>

解

$( "#vidlib_dtable" ).on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
});

$('#vidlib_dtable').on('click','.editBut',function(e) {
    e.stopPropagation(); /*   <-----  Put this before other steps   */
    var dtab = $('#vidlib_dtable').dataTable();
    var position = dtab.fnGetPosition(this);
    var contactId = dtab.fnGetData(position)[9];
});

Answer 1

您需要停止子元素事件的事件传播。使用方法：

 e.stopPropagation();

点击活动：

 $('#vidlib_dtable').on('click','.editBut',function(e) {
      var dtab = $('#vidlib_dtable').dataTable();
      var position = dtab.fnGetPosition(this); 
      var contactId = dtab.fnGetData(position)[9];
      e.stopPropagation();
 });

<强> Demo

Answer 2

您可以使用stopPropagation：

$('#vidlib_dtable input[type="button"]').click(function(e) {
          var dtab = $('#vidlib_dtable').dataTable();
          var position = dtab.fnGetPosition(this); 
          var contactId = dtab.fnGetData(position)[9];
          e.stopPropagation();
     });

Answer 3

如果你的按钮超过行 - 你可以使用

$('#vidlib_dtable input[type="button"]').click(function(e) {
          var dtab = $('#vidlib_dtable').dataTable();
          var position = dtab.fnGetPosition(this); 
          var contactId = dtab.fnGetData(position)[9];
          e.stopPropagation();
     });

Answer 4

小修正使其适用于IE

使用以下内容：

$('#vidlib_dtable input[type="button"]').click(function(e) {
      var dtab = $('#vidlib_dtable').dataTable();
      var position = dtab.fnGetPosition(this); 
      var contactId = dtab.fnGetData(position)[9];
      e = e||event;/* get IE event ( not passed ) */
      e.stopPropagation? e.stopPropagation() : e.cancelBubble = true;
 });

按钮单击事件优先于行单击事件

4 个答案: