2017-09-16 3 views
6

にOnclick文書と特定のない要素にアラート

$(document).click(function(){ 
 
    alert('Document Clicked'); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <button type='button'>CLICK [NO ALERT]</button> 
 
    <button type='button'>ME[NO ALERT]</button> 
 
</body>

私はボタンをクリックした場合、どのようにして現れてからの警告を防ぐか、しかし、ボタン以外のものは警告することができます。

答えて

6

あなたがその特定の<button>に別のclickリスナーを追加し、イベントの伝播を停止することができます別のオプションがクリックされた要素があることであるかどうかを確認することです

$(document).click(function(){ 
 
    alert('Document Clicked'); 
 
}) 
 
$('.not-clickable').click(function(e) { 
 
    e.stopPropagation(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <button type='button'>CLICK [NO ALERT]</button> 
 
    <button type='button' class="not-clickable">ME[NO ALERT]</button> 
 
</body>

特定のボタン:

$(document).click(function(e){ 
 
    if (e.target.classList.contains('not-clickable')) { 
 
    return; 
 
    } 
 
    alert('Document Clicked'); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
    <button type='button'>CLICK [NO ALERT]</button> 
 
    <button type='button' class="not-clickable">ME[NO ALERT]</button> 
 
</body>

+0

は、私はちょうど私が本当にあなたの更新を理解していない違い – AXAI

+0

をcalrifyし、願っています。 'button 'のクリックだけを警告したいのであれば、最初の' $(document).click ... 'を削除してください。 – Dekel

+0

私は気にしません。あなたは正しいです。 – AXAI

0

<button type='button' onclick="event.stopPropagation()">CLICK [NO ALERT]</button>それを試してみてください

$("#SomeElementId").click(function(e) { 
 
    //do something 
 
    e.stopPropagation(); 
 
})

0

それを試してみてください。 デフォルトでは、クリックイベントは親要素に対して発生しますが、event.stopPropagation()はイベントの要素原点のみを保持します。それだけであなただけの使用第二のオプションを使用しますので、あなたは、あまりにもそれを確認することができます場合、私は別の例を追加し

関連する問題