滑鼠事件

document.onclick = function(ev) {
  var oEvent = ev || event; //ie下ev不存在，firefox預設傳一個ev
  oEvent.clientX; //滑鼠點選時的位置
}

事件冒泡

//取消事件冒泡
oBtn.onclick = function(ev) {
  var oEvent = ev || event;
  oEvent.cancelBubble = true;
}

控制元件隨著滑鼠移動

document.onmousemove = function(ev) {
  var oEvent = ev || event;
  //clientX和clientY代表的是可視區的座標
  //所有使用clientX和clientY的都需要計算到滾動條
  //oDiv需要設定style為absolute
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  oDiv.style.top = oEvent.clientY + document.documentElement.scrollTop;
}

按鍵事件

基礎

onkeydown、onkeyup、onkeypress

document.onkeydown = function(ev) {
  oEvent = ev || event;
  oEvent.keyCode
}

小知識

oDiv.offsetLeft; //就是style中的left值 + margin-left值

ctrl+enter留言

oText.onKeydown = function(ev) {
  var oEvent = ev || event;
  //shiftKey,altKey
  if(oEvent.ctrlKey && oEvent.keyCode == 13) {

  }
}

預設行為

遮蔽右鍵選單

document.oncontextmenu = function(){
  return false;
}

阻止表單提交

oForm.onsubmit = function() {
  return false;
}

自定義右鍵選單

<style>
  #menu {
    width: 50px;
    background: #CCC;
    border: 1px solid black;
    position: absolute;
    display: none;
  }
</style>
<ul id="menu">
  <li>登入</li>
  <li>回到首頁</li>
  <li>登出</li>
</ul>

//js
document.oncontextmenu = function(ev) {
  var oEvent = ev || event;
  var oUl = document.getElementById("menu");
  oUl.style.display = "block;
  //未加 scrollTop和scrollLeft
  oUl.style.left = oEvent.clientX + 'px';
  oUl.style.top = oEvent.clientY + 'px';
  return false;
}
document.onclick = function () {
  var oUl = document.getElementById("menu");
  oUl.style.display = 'none';
}

拖拽事件

//onmousedown -> onmousemove -> onmouseup
window.onload = function() {
    var oDiv = document.getElementById("div1");
    
    var disX = 0;
    var disY = 0;
    
    oDiv.onmousedown = function(ev) {
      var oEvent = ev || event;
      disX = oEvent.clientX - oDiv.offsetLeft;
      disY = oEvent.clientY - oDiv.offsetTop;
      //防止拖出div範圍
      document.onmousemove = function(ev) {
        var oEvent = ev || event;
        
        oDiv.style.left = oEvent.clientX - disX + 'px';
        oDiv.style.top = oEvent.clientY - disY + 'px';
        
      }
      
      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      }
    }
    
   return false; //修正firefox下的bug，空div拖拽bug
  }