Question

我想在有人点击td元素时发出提醒但我不想在有人点击按钮时触发事件。我怎样才能做到这一点？

$('#example tbody').on( 'click', 'tr:not(button)', function () {
    alert('Hello world!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>
                <button type="button">Example</button>
            </td>
        </tr>
    </tbody>
</table>

Answer 1

一个不错的选择是使用stopPropagation()按钮点击。这样点击仍然会发生，但它不会“冒泡”并且不会触发tr：

$('#example tbody').on( 'click', 'tr', function () {
    alert('Hello world!');
});
$('#example tbody').on( 'click', 'button', function (ev) {
    ev.stopPropagation()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>
                <button type="button">Example</button>
            </td>
        </tr>
    </tbody>
</table>

另一种选择是将目标元素从tr更改为td，并仅选择不包含按钮的表格单元格：

$('#example tbody').on( 'click', 'td:not(:has(button))', function () {
    alert('Hello world!');
});

此选项不太好 - 它使可点击区域变小，不包括按钮外的其余单元格或单元格之间的边距。

Answer 2

您可以对按钮的点击事件使用stopPropagation()方法，以排除按钮显示提醒。我给了按钮一个id。

＆＃13;

$('#example tbody').on( 'click', function () {
    alert('Hello world!');
    $('#myButton').on('click', function(e){
       e.stopPropagation(); 
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>
                <button type="button" id="myButton">Example</button>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 3

$('tr').click(function(){
   alert('beep');
});

和你可以做的按钮

$('tr button').click(function(e){
   e.stopPropagation();
});

Answer 4

 $('#example tbody').on( 'click','td',function (){
        alert('Hello world!');
 });
 $('button').click(function(event) {
    event.stopPropagation();
});

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <table id="example">
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>
                    <button type="button">Example</button>
                </td>
            </tr>
        </tbody>
    </table>

jQuery不选择器不工作按钮

4 个答案: