[JSの基本] e.stopPropagation（）は、イベントのバブリングを防ぎます

e.stopPropagation（）は、イベントがバブリングするのを防ぎます

最初の例

  <table border="1">
    <tr>
      <td><span>冒泡事件测试</span></td>
      <td><span>冒泡事件测试2</span></td>
    </tr>
  </table>

    $('table').on('click', function(e) {
    
    
      alert('table alert!')
    })

    $('tr').on('click', function() {
    
    
      alert('tr alert') 
    })

    $('span').on('click', function() {
    
    
      alert('span alert!')
    })

初期効果

この状況が表示されます：スパンアラート-> tdアラート->テーブル
アラート。これはイベントバブリングと呼ばれます。つまり、下から上、内側から外側に向かって、イベントが順番にトリガーされます。

イベントが急上昇したくない場合は、どうすればよいですか？

    $(function() {
    
    
      $('table').on('click','span',function(e) {
    
    
        alert('span alert!')
        e.stopPropagation();
      })
      $('table').on('click', function() {
    
    
        alert('table alert!')
      })
    })

このように、スパンをクリックすると、「スパンアラート！」ダイアログボックスが終了し、イベントバブリングが禁止され、「テーブルアラート！」ダイアログボックスはトリガーされません。

イベント関連の情報を取得する場合は、eオブジェクトを無名メソッドに追加する必要があります。eはイベントオブジェクトです。