インラインのonclick属性でイベントの伝播を停止する方法は？

以下を検討してください。

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header');">something inside the header</span>
</div>

ユーザーがスパンをクリックしたときにdivのクリックイベントが発生しないようにするにはどうすればよいですか？

event.stopPropagation（）を使用します。

<span onclick="event.stopPropagation(); alert('you clicked inside the header');">something inside the header</span>

IEの場合： window.event.cancelBubble = true

<span onclick="window.event.cancelBubble = true; alert('you clicked inside the header');">something inside the header</span>

関数内からイベントオブジェクトを取得する方法は2つあります。

1. W3C準拠ブラウザー（Chrome、Firefox、Safari、IE9 +）の最初の引数
2. Internet Explorerのwindow.eventオブジェクト（<= 8）

W3Cの推奨事項に準拠していないレガシーブラウザをサポートする必要がある場合は、通常、関数内で次のようなものを使用します。

function(e) {
  var event = e || window.event;
  [...];
}

最初にチェックし、次にもう1つをチェックして、イベント変数内で見つかったものを保存します。ただし、インラインイベントハンドラーでは、e使用するオブジェクトはありません。その場合、arguments常に利用可能で、関数に渡される引数の完全なセットを参照するコレクションを利用する必要があります。

onclick="var event = arguments[0] || window.event; [...]"

ただし、一般的に言えば、伝播の停止などの複雑な処理が必要な場合は、インラインイベントハンドラーを回避する必要があります。イベントハンドラーを個別に記述して要素にアタッチすることは、中長期的には、読みやすさと保守性の両方の点ではるかに優れたアイデアです。

window.eventはFireFoxではサポートされていないため、次のようにする必要があることに注意してください。

e.cancelBubble = true

または、FireFoxのW3C標準を使用できます。

e.stopPropagation();

ファンシーになりたい場合は、これを行うことができます：

function myEventHandler(e)
{
    if (!e)
      e = window.event;

    //IE9 & Other Browsers
    if (e.stopPropagation) {
      e.stopPropagation();
    }
    //IE8 and Lower
    else {
      e.cancelBubble = true;
    }
}

この関数を使用すると、正しいメソッドが存在するかどうかがテストされます。

function disabledEventPropagation(event)
{
   if (event.stopPropagation){
       event.stopPropagation();
   }
   else if(window.event){
      window.event.cancelBubble=true;
   }
}

私は同じ問題を抱えていました-IEのjsエラーボックス-これは私が見る限りすべてのブラウザーで正常に機能します（event.cancelBubble = trueはIEで機能します）

onClick="if(event.stopPropagation){event.stopPropagation();}event.cancelBubble=true;"

これは私のために働いた

<script>
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
</script>

<div onclick="alert('Click!')">
  <div onclick="cancelBubble(event)">Something inside the other div</div>
</div>

ASP.NET Webページ（MVCではない）では、Sys.UI.DomEventオブジェクトをネイティブイベントのラッパーとして使用できます。

<div onclick="event.stopPropagation();" ...

または、イベントをパラメーターとして内部関数に渡します。

<div onclick="someFunction(event);" ...

そしてsomeFunctionで：

function someFunction(event){
    event.stopPropagation(); // here Sys.UI.DomEvent.stopPropagation() method is used
    // other onclick logic
}

このページによると、IEでは次のものが必要です。

event.cancelBubble = true

Karmaのせいでコメントできないので、全体の答えとしてこれを記述します。高速ハック：

<div onclick="(arguments[0] || window.event).stopPropagation();">..</div>

遅いのはわかっていますが、これが1行で機能することをお知らせします。中括弧は、どちらの場合もstopPropagation-functionが付加されたイベントを返すため、ifおよび...のように中括弧でそれらをカプセル化しようとしました。:)

これも機能します-リンクHTMLでは、onclickとreturnを次のように使用します。

<a href="mypage.html" onclick="return confirmClick();">Delete</a>

そして、comfirmClick（）関数は次のようになります。

function confirmClick() {
    if(confirm("Do you really want to delete this task?")) {
        return true;
    } else {
        return false;
    }
};

クリックされた要素を確認しないでください。あなたが何かをクリックすると、window.event.targetクリックされた要素に割り当てられている、とクリックされた要素は、引数として渡すことができます。

ターゲットと要素が等しくない場合、それは上に伝播したイベントでした。

function myfunc(el){
  if (window.event.target === el){
      // perform action
  }
}
<div onclick="myfunc(this)" />

<div onclick="alert('you clicked the header')" class="header">
  <span onclick="alert('you clicked inside the header'); event.stopPropagation()">
    something inside the header
  </span>
</div>

最善の解決策は、JavaScript関数を介してイベントを処理することですが、html要素を直接使用するシンプルで迅速な解決策を使用するため、「event」と「window.event」は廃止され、普遍的にサポートされていません（https://developer.mozilla.org/en-US/docs/Web/API/Window/event）、私は次の「ハードコード」を提案します：

<div onclick="alert('blablabla'); (arguments[0] ? arguments[0].stopPropagation() : false);">...</div>