「jQuery」preventDefaultで右クリックを無効にするサンプル
環境
Windows 11 pro
Google Chrome 105.0.5195.127
jquery 3.6.0
構文
書式
$('body').contextmenu(function(e){
処理コード
e.preventDefault();
});
$('body').contextmenu(function(e){
処理コード
e.preventDefault();
});
$('body').contextmenu(function(e){
処理コード
e.preventDefault();
});
contextmenuを使用して右クリックを無効にします。
2.Event.preventDefault()
preventDefault() は Event インターフェイスのメソッドで、ユーザーエージェントに、
このイベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます。
3.contextmenu イベント
contextmenu イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。
このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。
contextmenu イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。
このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。
contextmenu イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。 このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。
使用例
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('body').contextmenu(function(e){
alert("右クリックを禁止します");
e.preventDefault();
});
})
</script>
</head>
<body>
<div >
test data 111
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('body').contextmenu(function(e){
alert("右クリックを禁止します");
e.preventDefault();
});
})
</script>
</head>
<body>
<div >
test data 111
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('body').contextmenu(function(e){
alert("右クリックを禁止します");
e.preventDefault();
});
})
</script>
</head>
<body>
<div >
test data 111
</div>
</body>
</html>
実行結果
右クリックをする際に「右クリックを禁止します」メッセージが表示されます。