javascript - 子要素の onclick イベントをトリガーしますが、親のイベントはトリガーしません

Question

それぞれ onclick イベントを持つネストされた要素がいくつかあります。ほとんどの場合、ユーザーが子をクリックしたときに両方のイベントが発生するようにします (親イベントと子イベントの両方がトリガーされます - デフォルトの動作)。ただし、子の onclick イベント (ユーザーのクリックではなく JavaScript から) をトリガーしたいが、親の onclick イベントをトリガーしたくない場合が少なくとも 1 つあります。これが親イベントをトリガーしないようにするにはどうすればよいですか?

私がいたのは：

ユーザーが A をクリック: A の onclick が発生します。
ユーザーが B をクリック: B の onclick が起動し、A の onclick も
起動 B のクリックを手動でトリガー: B が起動し、A が起動しない (これが問題です)

Answer 1

triggerHandler子供に使用します。これにより、イベントが DOM を介して伝播されなくなります。

.triggerHandler() で作成されたイベントは、DOM 階層をバブルアップしません。ターゲット要素によって直接処理されない場合、何もしません。

Answer 2

方法 1:

メソッドを使用 stopPropagation()して、イベントのバブリングを防ぐことができます。

$('.element').on('click', function(e){
e.stopPropagation();
});

これをチェックしてくださいDEMO

方法 2:

を使用 return falseしてイベントのバブリングを防止できます。これにより、デフォルト アクションも防止されます。

$('.element').on('click', function(e){
//--do your stuff----
return false;
});