5

クリック可能なテーブルセルがあり、クリックするとjQueryイベントが発生します。そのセル内にはボタンもあり、クリックすると別の jQuery イベントが発生します。問題は、ボタンをクリックすると、セルとボタンの両方のイベントが発生することです。

例えば：

<script>
    $(document).ready(function () {
        $('#cell').click(function () {
            alert('cell clicked');
        });        
        $('#button').click(function () {
            alert('button clicked');
        });
    });
</script>

<table>
    <tr>
        <td id="cell">
            <button id="button">go</button>
        </td>
    </tr>
</table>

ボタンがクリックされたときにセルクリックイベントが発生しないようにするにはどうすればよいですか?

4

4 に答える 4

6

これを使用するstopPropagation()と、親 dom へのイベントのバブリングを停止できます。

例

$('#button').click(function (e) {
    e.stopPropagation();
    alert('button clicked');
});

table幅を に設定し100%てテストします。

テストコード

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

    $(function()
    {
        $('#cell').click(function () {
            alert('cell clicked');
        });        
        $('#button').click(function (e) {
            e.stopPropagation();
            alert('button clicked');
        });
    });

</script>
<table width="100%">
    <tr>
        <td id="cell">
            <button id="button">go</button>
        </td>
    </tr>
</table>
于 2013-03-04T11:09:06.110 に答える
2

event propagationと呼ばれるものを停止しevent bubbling to the parentます:

$('#button').click(function (e) {
        e.stopPropagation();
        alert('button clicked');
    });
于 2013-03-04T11:09:48.857 に答える
2

使用する必要があります

stopPropagation

この例はそれを修正する必要があります:

$(document).ready(function () {
    $('#cell').click(function () {
        alert('cell clicked');
    });        
    $('#button').click(function (e) {
        e.stopPropagation();
        alert('button clicked');
    });
});

それはそれを修正する必要があります。

于 2013-03-04T11:10:14.470 に答える
2 
$(document).ready(function(){
   $('#cell').click(function(event){
     if($(event.target).is('#button')){
         event.stopPropagation();
      }    
   });    
});
于 2013-03-04T11:11:25.953 に答える