JavaScript + Ajax 実践サンプル集

マウスのイベントプロパティ表示

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、マウスイベント(DOM Level 2)の各種プロパティを表示します。マウスは画面上位に表示されているグレーのボックス内で操作してください。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MouseEvents (Properties)</title>
<style type="text/css">
/*
このサンプルは「標準DOMスクリプティング」の書籍掲載のサンプルを流用しています。 
*/
body {
  font-family: "ＭＳ Ｐゴシック", Osaka;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#box {
  border: 1px solid #000000;
  background-color: #dddddd;
  cursor: pointer;
  padding: 10px 3px 10px 3px;
  width: 294px;
}
.tbl {
  width: 300px;
  margin-top: 5px;
  padding: 0px;
  background-color: #ffffee;
  border-top: 2px solid #5c5c5c;
  border-bottom: 2px solid #5c5c5c;
}
.tbl .row {
  clear: both;
  width: 300px;
  margin: 0px;
  padding: 0px;
}
.tbl .hcol {
  float: left;
  width: 100px;
  height: 16px;
  border-bottom: 1px solid #8c8c8c;
  margin: 0px;
}
.tbl .col {
  float: left;
  width: 200px;
  height: 16px;
  border-bottom: 1px solid #8c8c8c;
  margin: 0px;
}
.tbl .bottomcell {
  border-bottom: none;
}
.tbl .bottomrow {
  height: none;
}
</style>
<script type="text/javascript" src="js/universaldom.js"></script>
<script type="text/javascript">
universal.dom.addEventListener(window, 'load', initDoc);

function initDoc() {
  var box = document.getElementById('box');
  universal.dom.addEventListener(box, 'mouseover', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mouseout', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mousemove', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mousedown', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mouseup', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'click', dispMouseEventProperties);

universal.dom.addEventListener(box, 'contextmenu', contextmenuStop);
}

function dispMouseEventProperties(evt) {
  document.getElementById('type').firstChild.nodeValue = evt.type;
  document.getElementById('altKey').firstChild.nodeValue = evt.altKey;

if(evt.relatedTarget) {
    document.getElementById('relatedTarget').firstChild.nodeValue = evt.relatedTarget.nodeName;
  } else if(evt.toElement && evt.type == 'mouseout') {
    document.getElementById('relatedTarget').firstChild.nodeValue = evt.toElement.nodeName;
  } else if(evt.fromElement && evt.type == 'mouseover') {
    document.getElementById('relatedTarget').firstChild.nodeValue = evt.fromElement.nodeName;
  } else {
    document.getElementById('relatedTarget').firstChild.nodeValue = 'N/A';
  }
 
  document.getElementById('screenX').firstChild.nodeValue = evt.screenX;
  document.getElementById('screenY').firstChild.nodeValue = evt.screenY;
  document.getElementById('shiftKey').firstChild.nodeValue = evt.shiftKey;
  document.getElementById('detail').firstChild.nodeValue = evt.detail;

universal.dom.preventDefault(evt);
  universal.dom.stopPropagation(evt);
}

function contextmenuStop(evt) {
  universal.dom.preventDefault(evt);
  universal.dom.stopPropagation(evt);
}
</script>
</head>
<body>
<div id="box">
  このボックス内でマウスを操作してください。
</div>
<div class="tbl">
  <div class="row">
    <div class="hcol">type</div>
    <div class="col">： <span id="type">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">altKey</div>
    <div class="col">： <span id="altKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">button</div>
    <div class="col">： <span id="button">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">clientX</div>
    <div class="col">： <span id="clientX">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">clientY</div>
    <div class="col">： <span id="clientY">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">ctrlKey</div>
    <div class="col">： <span id="ctrlKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">metaKey</div>
    <div class="col">： <span id="metaKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">relatedTarget</div>
    <div class="col">： <span id="relatedTarget">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">screenX</div>
    <div class="col">： <span id="screenX">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">screenY</div>
    <div class="col">： <span id="screenY">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">shiftKey</div>
    <div class="col">： <span id="shiftKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol bottomcell">detail</div>
    <div class="col bottomcell">： <span id="detail">N/A</span></div>
  </div>
</div>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**********************************************************************
* universaldom.js - universal dom (標準DOMスクリプティングから流用）
***********************************************************************/

var universal = new Object();
universal.dom = new Object();

universal.dom.addEventListener = function(elm, type, func, useCapture) {
  if(! elm) { return false; }
  if(! useCapture) {
    useCapture = false;
  }
  if(elm.addEventListener) {
    elm.addEventListener(type, func, false);
  } else if(elm.attachEvent) {
    elm.attachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};

universal.dom.removeEventListener = function(elm, type, func, useCapture) {
  if(! elm) { return false; }
  if(! useCapture) {
    useCapture = false;
  }
  if(elm.removeEventListener) {
    elem.removeEventListener(type, func, false);
  } else if(elm.detachEvent) {
    elm.detachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};

universal.dom.target = function(evt) {
  if(evt && evt.target) {
    if(evt.target.nodeType == 3) {
      return evt.target.parentNode;
    } else {
      return evt.target;
    }
  } else if(window.event && window.event.srcElement) {
    return window.event.srcElement;
  } else {
    return null;
  }
};

universal.dom.preventDefault = function(evt) {
  if(evt && evt.preventDefault) {
    evt.preventDefault();
    evt.currentTarget['on'+evt.type] = function() {return false;};
  } else if(window.event) {
    window.event.returnValue = false;
  }
};

universal.dom.stopPropagation = function(evt) {
  if(evt && evt.stopPropagation) {
    evt.stopPropagation();
  } else if(window.event) {
    window.event.cancelBubble = true;
  }
};

universal.dom.dispatchEvent = function(elm, evttype) {
  if(elm.dispatchEvent) {
    var evt = document.createEvent('MouseEvents');
    evt.initEvent(evttype, true, true);
    elm.dispatchEvent(evt);
  } else if(window.event) {
    var evt = document.createEventObject();
    evt.button = 1;
    elm.fireEvent('on'+evttype, evt);
  }
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<script type="text/javascript" src="js/universaldom.js"></script>
<script type="text/javascript">
universal.dom.addEventListener(window, 'load', initDoc);

function initDoc() {
  var box = document.getElementById('box');
  universal.dom.addEventListener(box, 'mouseover', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mouseout', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mousemove', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mousedown', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'mouseup', dispMouseEventProperties);
  universal.dom.addEventListener(box, 'click', dispMouseEventProperties);

  universal.dom.addEventListener(box, 'contextmenu', contextmenuStop);
}

function dispMouseEventProperties(evt) {
  document.getElementById('type').firstChild.nodeValue = evt.type;
  document.getElementById('altKey').firstChild.nodeValue = evt.altKey;

  var buttoncaption = '';
  
  if(document.uniqueID) { /* IE */
    if(evt.button == 0) {
      buttoncaption = '（クリックなし）';
    } else if(evt.button == 1) {
      buttoncaption = '（左）';
    } else if(evt.button == 2) {
      buttoncaption = '（右）';
    } else if(evt.button == 3) {
      buttoncaption = '（左/右）';
    } else if(evt.button == 4) {
      buttoncaption = '（中）';
    } else if(evt.button == 5) {
      buttoncaption = '（左/中）';
    } else if(evt.button == 6) {
      buttoncaption = '（中/右）';
    } else if(evt.button == 7) {
      buttoncaption = '（左/中/右）';
    }
  } else { /* Firefox */
    if(evt.button == 0) {
      buttoncaption = '（左/クリックなしのいずれか）';
    } else if(evt.button == 1) {
      buttoncaption = '（中）';
    } else if(evt.button == 2) {
      buttoncaption = '（右）';
    }
  }
  document.getElementById('button').firstChild.nodeValue = evt.button + buttoncaption;
  document.getElementById('clientX').firstChild.nodeValue = evt.clientX;
  document.getElementById('clientY').firstChild.nodeValue = evt.clientY;
  document.getElementById('ctrlKey').firstChild.nodeValue = evt.ctrlKey;
  document.getElementById('metaKey').firstChild.nodeValue = evt.metaKey;

  if(evt.relatedTarget) {
    document.getElementById('relatedTarget').firstChild.nodeValue = evt.relatedTarget.nodeName;
  } else if(evt.toElement && evt.type == 'mouseout') {
    document.getElementById('relatedTarget').firstChild.nodeValue = evt.toElement.nodeName;
  } else if(evt.fromElement && evt.type == 'mouseover') {
    document.getElementById('relatedTarget').firstChild.nodeValue = evt.fromElement.nodeName;
  } else {
    document.getElementById('relatedTarget').firstChild.nodeValue = 'N/A';
  }
 
  document.getElementById('screenX').firstChild.nodeValue = evt.screenX;
  document.getElementById('screenY').firstChild.nodeValue = evt.screenY;
  document.getElementById('shiftKey').firstChild.nodeValue = evt.shiftKey;
  document.getElementById('detail').firstChild.nodeValue = evt.detail;

  universal.dom.preventDefault(evt);
  universal.dom.stopPropagation(evt);
}

function contextmenuStop(evt) {
  universal.dom.preventDefault(evt);
  universal.dom.stopPropagation(evt);
}
</script>

このサンプルを編集して試してみる!

マウスの各種イベントハンドラは、DOM Level 2のAPIを使用して登録しています。

universal.dom.addEventListener(
  box,'mouseover',dispMouseEventProperties);
universal.dom.addEventListener(
  box,'mouseout',dispMouseEventProperties);
universal.dom.addEventListener(
  box,'mousemove',dispMouseEventProperties);
universal.dom.addEventListener(
  box,'mousedown',dispMouseEventProperties);
universal.dom.addEventListener(
  box,'mouseup',dispMouseEventProperties);
universal.dom.addEventListener(
  box,'click',dispMouseEventProperties);

標準DOMスクリプティング JavaScript＋DOMによるWebアプリデザインの基礎

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

マウスのイベントプロパティ表示