鼠标左右键,区分点击和拖拽和键盘事件

鼠标左右键的区分

  如何区分鼠标的左右键0/1/2
       //在源对象里
    //   button=0左键
    //   button=2右键
       document.onmousedown = function (e) {
           if(e.button==2){
               console.log('right');
           }else if(e.button==0){
            console.log('left')
           }
        }

css中的hover 就是用js封装的,其中利用了

 div.onmouseenter=function(){
           div.style.background='yellow'
       }
       div.onmouseleave=function(){
           div.style.background="green"
       }
//click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键            

利用时间戳来区分客户是要点击还是拖拽

	  var firstTime = 0;
      var lastTime = 0;
      var key = flase;
      document.onmousedown = function () {
          firstTime = new Date().getTime();
      }
      document.onmouseup = function () {
          lastTime = new Date().getTime();
          if(lastTime - firstTime < 300){
              key = true;//小于300就是点击,大于300就是别的,想干嘛干嘛
          }
      }
      document.onclick = function () {
          if (key) {
              console.log("click")
              key = flase;
          }
      }

键盘事件

一个小的demo可以感受一下keydown>keypress>keyup
keydown可以响应任何键,keypress只能响应字符类按键

		   document.onkeydown = function () {
                console.log('keydown')
            }
            document.onkeypress = function () {
                console.log('keypress')
            }
            document.onkeyup = function () {
                console.log('keyup')
            }
		   document.onkeydown = function (e) {
                console.log(e)
            }
            document.onkeypress = function (e) {
                console.log(e)
            }
            document.onkeyup = function (e) {
                console.log(e)
            }

keypress 区分大小写字母,keyCode的值不一样,但是keydown和keyup不区分大小写字母
操作类按键只能用keydown
鼠标左右键,区分点击和拖拽和键盘事件_第1张图片
鼠标左右键,区分点击和拖拽和键盘事件_第2张图片

关于如何把ASSCII码转换成字符
 			document.onkeypress = function (e) {
                console.log(String.fromCharCode(e.charCode))
            }

画外 // div.setCapture()//仅仅在IE里有效
// div.releaseCaputer()

你可能感兴趣的:(js)