イベントクリックを止めたい。
event.preventDefault()「ullia」のイベントを停止するために使用しようとしています。
<ul>
<li><a href="#">Click here</a></li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','ul li a', function(event){
event.preventDefault();
});
$(document).on('click','ul li a', function(event){
alert('Thank you for clicking');
});
});
</script>
しかし、「ul li a」をクリックすると、何も表示されないはずですが、が表示されますalert('Thank you for clicking')。
イベントのデフォルトのアクション（a適切な場合は別のページにリダイレクトするhref）は正常に防止されます。ただし、呼び出しpreventDefaultても、イベントの他のハンドラーがトリガーされるのを防ぐことはできません。同じ要素（document、ここ）にアタッチされているときに後のハンドラーが実行されないようにする場合は、次を使用しますstopImmediatePropagation。
$(document).on('click', 'ul li a', function(event) {
event.preventDefault();
event.stopImmediatePropagation();
});
$(document).on('click', 'ul li a', function(event) {
alert('Thank you for clicking');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a href="#">Click here</a></li>
</ul>防止したいハンドラーが親要素にアタッチされている場合は、stopPropagation代わりにを使用してください。防止したいハンドラーが子要素にアタッチされている場合は、キャプチャフェーズで最初のハンドラーを使用stopPropagation して実行します。
ul.addEventListener('click', (e) => {
if (!e.target.matches('ul li a')) {
return;
}
e.preventDefault();
e.stopPropagation();
}, true);
$(document).on('click', 'li a', function(event) {
alert('Thank you for clicking');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ul">
<li><a href="#">Click here</a></li>
</ul>場合はa常に持っていますhrefのが#、その後、preventDefaultページに関係なく変更されることはありませんので、必要ありません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加