マウスホイールのクリックを禁止したい
-
こんにちは。
ブログで画像のコピーを防止したいと思っています。
右クリック禁止だけならプラグインで難なくできるのですが、
マウスホイールをクリックすると、別画面に画像が出てそれを右クリックでコピー出来てしまいます。どなたかホイールのクリックを禁止させる方法をご存知の方いらっしゃいませんか?
どうぞよろしくお願いいたします。
-
WordPressのプラグインなどにないならば、WordPressレベルでなく、jQueryプラグインなどで対応するしかなさそうです。
PHP でキーイベントを受け取るのはできない相談だから、たぶんプラグインも JavaScript を使っているのではないかなぁ、と思います。マウスのイベントはブラウザごとに違ったりするので、私も、jQuery の event.which を使うのがよいと思います。
http://api.jquery.com/event.which/
<script type="text/javascript"> jQuery(document).ready(function($) { $('img').mousedown(function(event) { event.preventDefault(); if (event.which == 1) { alert(event.type); } else if (event.which == 2) { alert(event.type); } else if (event.which == 3) { alert(event.type); } }); }); </script>
リンク先のドキュメントでは、1 が左ボタン、2 が中央、3 が右ということですから、ブラウザの違いを吸収してくれているのだと思います。ドキュメントの例は、.on() を使ってますが、「マウスホイールのクリック」ということなので、.mousedown() に変えてあります。
セレクタ($(‘img’)のところ)は適宜変更してください。alert() にしましたが、return false とすれば、何も起こらないようになります。勿論ですが、ブラウザで JavaScript を無効にすれば、効力はありません。
少々疑問なのが、
マウスホイールをクリックすると、別画面に画像が出てそれを右クリックでコピー出来てしまいます。
ということは、左クリックしたら普通に現在のウィンドウあるいはタブに画像が表示されませんか?
それならその状態でも普通にコピー/保存できてしまうと思いますが。Fukazawa Kojiro様、kjmtsh様、ご回答ありがとうございます。
kjmtshさまの通りに書き込んだのですが、アラートが表示されるだけで別画面に画像が出てしまいます。
} else if (event.which == 2) {
alert(event.type);のalertの部分にリンク禁止・反応しないなど、の関数があるのでしょうか?
昨日からずっと調べていますが、どうしてもわかりません。
どうかよろしくお願いいたします。ixkaito様、説明不足で申し訳ありません。
現在、左クリックするとlightboxで表示され、直接はコピーできないようになっております。
対策としては、すぐにコピーできない措置を取りたいだけなので、
ホイールクリックでの画像表示を禁止したいのですが。。うーん、現象が再現できないです。Chrome、Firebox、Internet Explorer で試しましたが…
どこかで何かがイベントが発行しているか、抑圧しているかだと思いますが、原因はまったくわかりません。ためしに、ということで、クリックの方を抑圧してみましょうか。下のスクリプトだとどうなりますか?
jQuery(document).ready(function($) { $("img").click(function(event) { if (event.preventDefault) preventDefault(); if (event.returnValue) event.returnValue = false; return false; }); });
lightbox が動かなくなっちゃうかもしれませんが、テストコードなので、テストが終わったら削除してかまいません。
昨日からずっと調べていますが
event、preventDefault、stopPropagation などを調べるとよいかもです。
kjmtsh様、ありがとうございます。
試してみたところ、右クリック禁止の状態で、左クリック、ホイールクリックは出来ます。
初歩的なことで申し訳ないのですが、ヘッダー内に、
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $("img").click(function(event) { if (event.preventDefault) preventDefault(); if (event.returnValue) event.returnValue = false; return false; }); }); </script> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php wp_title( '|', true, 'right' ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php wp_head(); ?> </head>
の記述であっていますでしょうか?
書き込むところが違っているような不安が出てきましたので、
よろしくお願いいたします。<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
これは、だれかに教わったのですか? それともご自分で? 現行の WordPress では、1.10 になっていたと記憶しているのですが… 確かめてません。
靴の上から足を掻くようで、申し訳ないのですが、少し環境を教えていただけますか?
- お使いのテーマ
- lightbox のバージョン
- 右クリックをさせないためのプラグインの名前
- お使いのブラウザ
- JavaScriptのブラウザでのデバッグ方法をご存じかどうか
これから出かけるので、返信は遅くなるかもしれませんので、ご容赦ください。その間に JavaScript Master の方たちが解決してくれるかもしれませんが…
- トピック「マウスホイールのクリックを禁止したい」には新たに返信することはできません。