web-dev-qa-db-ja.com

インラインの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のクリックイベントが発生しないようにするにはどうすればよいですか。

javascripthtmleventsdom
281
Sam

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>
227
James

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

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

W3Cの勧告に従わないレガシブラウザをサポートする必要がある場合は、一般的には関数内で次のようなものを使用します。

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

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

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

ただし、一般的に言って、伝播を止めるなどの複雑なことが必要な場合は、インラインイベントハンドラを避けるべきです。イベントハンドラを別々に作成して要素に関連付けることは、読みやすさと保守性の両方の観点から、中長期的にははるかに優れたアイデアです。

206
Gareth

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;
    }
}
80
Robert C. Barth

この関数を使用してください、それは正しいメソッドの存在をテストします。

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

私は同じ問題を抱えていた - IEのjsエラーボックス - これは私が見ることができる限りすべてのブラウザでうまく働きます（event.cancelBubble = trueはIEの仕事をします）

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

これは私のために働きました

<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>
10
Matías Contreras Selman

（MVCではなく）ASP.NET Webページの場合は、ネイティブイベントのラッパーとして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
}
7
Evgeny Gorb

このページ に従って、IEに必要なもの：

event.cancelBubble = true

5
ajh1138

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

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

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

これも動作します - リンクHTMLではこのようにreturn onclickを使用します。

<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;
    }
};
1
Rajendra
<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>
0
commonpike