关于浏览器鼠标mouse事件和键盘key事件

[Hibop]

键盘事件

• keydown：按下键盘键
• keypress：紧接着keydown事件触发（只有按下字符键时触发）
• keyup：释放键盘键 顺序为：keydown -> keypress ->keyup 如果用户按下了一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止

注意点

• 键盘中的键 分为字符键 (可打印) 和 功能键 (不可打印)
• keyCode 键码
• charCode 字符编码
• 在keyup 事件中无法阻止浏览器默认事件，因为在keypress时，浏览器默认行为已经完成，即将文字输入文本框（尽管这时还没显示），这个时候不管是preventDefault还是returnValue = false，都不能阻止在文本框中输入文字的行为，如要阻止默认行为，必须在keydown或keypress时阻止 外链

鼠标事件

• mouseenter： 鼠标指针穿过被选元素边界，后代元素不会触发，对应leave该方法不会冒泡

• mouseleave: 鼠标移出某个元素时触发， 后代元素不会触发， 该方法不会冒泡

• mouseover：当鼠标经过被选元素和被选元素的子元素时都会触发mouseover事件，对应mouseout事件

• mouseout：鼠标移出目标的上方。

• mousemove：鼠标在目标的上方移动， 移动一个像素点都会，一般要节流。

• hover： Jquery中

mousedown => mouseup => click

hover: function( fnOver, fnOut ) {
   return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。

鼠标位置相关

通过鼠标在网页上的点击，我们还可以获得许多有用的参数，如获得当前鼠标的坐标。根据其参照物的不同，分为以下几套坐标系。一套是以当前浏览器的可视区为参照物（clientX, clientY），另一套是以显示器的屏幕为参照物（screenX, screenY）。此外微软还有一套坐标系（x,y），它是相对于触发事件的对象的offsetParent的，火狐有另一套坐标系（pageX, pageY），它是相对于当前网页的。我们可以通过如下函数来获得鼠标在网页的坐标。

var getCoordInDocument = function(e) {
  e = e || window.event;
  var x = e.pageX || 
    (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
  var y= e.pageY || 
    (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
  return {'x':x,'y':y};
}

光标控制

获取和修改光标位置

  const getCursorPosition = function(input) {
    if (!input) return; // No (input) element found
    if ("selectionStart" in input) {
      // Standard-compliant browsers
      return input.selectionStart;
    } else if (document.selection) {
      // IE
      input.focus();
      var sel = document.selection.createRange();
      var selLen = document.selection.createRange().text.length;
      sel.moveStart("character", -input.value.length);
      return sel.text.length - selLen;
    }
  };

  const setCursorPosition = function(input, pos) {
    if(input.setSelectionRange) {
      input.focus();
      input.setSelectionRange(pos);
    } else if(input.createTextRange) {
      var range = input.createTextRange();
      range.collapse(true);
      range.moveStart('character', pos);
      range.moveEnd('character', pos);
      range.select();
    }
  }

光标样式修改

input {
    color: #333;
    caret-color: red;
}

input框中相关事件

mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了input上面 点击： 先是鼠标按下 => 然后是focus => 鼠标抬起 => click; 输入： keydown => keyup => input =>change（焦点离开是触发） => blur

拖动算法