Javascriptで特定の要素のクリック・マウス関連イベントをごっそり無効にする方法

シークバーでページを切り替える仕組みを作っていて壁にぶち当たりました。シークバーのボタンを画像にしていたんですが、ボタンをドラッグするとブラウザの画像をドラッグすると起きるイベントのほうが優先されてしまい、狙った動作が起こせませんでした。対応策としては、

  • 透明な要素でボタン全体をカバーしてブラウザの画像ドラッグイベントをさける
  • Javascript側で対処する

という2点を思いつきました。シークバーの仕組み自体をJavascriptで作成しているので当然後者がスマートだと思い、方法を探ってみた結果です。

画像部分がうまくドラッグできないサンプルのリンクはこちら→ http://t87r.web.fc2.com/Wordpress/Drag/sample.html#ex2

このサンプルはドラッグで動かしたい要素「div2」にwindowのonloadで以下の関数を実行します。div2にはCSSで「position:absolute;」が指定してあります。

1. ドラッグで移動する要素に対する処理

function init2(){
    var div2 = document.getElementById("div2");
    var MousePosInDiv2 = {};

    var DragEvent = function(e){
        var NewMousePos = getMousePosition(e);
        div2.style.left = NewMousePos.x - MousePosInDiv2.x;
        div2.style.top = NewMousePos.y - MousePosInDiv2.y;
        MousePos = NewMousePos;
    }

    var addDragEvent = function(e){
        addEvent(window.document, "mousemove", DragEvent);
        addEvent(window.document, "mouseup", removeDragEvent);
        MousePosInDiv2.x = getMousePosition(e).x - div2.offsetLeft;
        MousePosInDiv2.y = getMousePosition(e).y - div2.offsetTop;
    }

    var removeDragEvent = function(e){
        removeEvent(window.document, "mousemove", DragEvent);
        removeEvent(window.document, "mouseup", removeDragEvent);
    }

    addEvent(div2, "mousedown", addDragEvent);
}

画像の外側の部分は問題なく動作しますが、画像部分は先述の通りブラウザの画像をドラッグしたときの挙動が優先されています。IE・Firefox・Safari・Opera・Chromeの投稿時点の最新版全てで同じ症状が出ています。これを解決するには、画像要素のマウス関連イベントを部分的に取り払ってしまうことでした。つまり以下の6つのイベントハンドラに対して「return false;」してやればいいのです。

  • onmousedown
  • onmouseup
  • onmouseover
  • ondrag
  • ondragstart
  • ondragend

この処理を関数にすると、以下のようになります。

2. 6つのイベントハンドラに対して「return false;」とする関数

function disableClickEvent(element){
	element.onmousedown = function (){return false;};
	element.onmouseup = function (){return false;};
	element.onmouseover = function (){return false;};
	element.ondrag = function (){return false;};
	element.ondragstart = function (){return false;};
	element.ondragend = function (){return false;};
}

関数実行時、引数にelementを渡してやるとブラウザによる画像ドラッグ時のイベントを回避できます。

実際に正常に動作しているサンプルはこちら→http://t87r.web.fc2.com/Wordpress/Drag/sample.html#ex3

画像部分をドラッグしてもちゃんと親要素のDivが移動するようになりました。これで、ユーザーのドラッグ操作で要素を移動する仕組みを作るときに、要素内に画像を心置きなく使えます。

ちなみにドラッグで移動するというわけでもない通常の画像にこの処理をしてやるとこうなります→http://t87r.web.fc2.com/Wordpress/Drag/sample.html#ex4

でも使用機会あんま無さそう。覚えとく必要はないな…

広告

t87r について

趣味:トランペット・釣り・コーディング JavascriptとGAE/Pythonを勉強中。
カテゴリー: Web Design タグ: , パーマリンク

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中