Open Hibop opened 6 years ago
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; }
mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件绑定到了input上面 点击: 先是鼠标按下 => 然后是focus => 鼠标抬起 => click; 输入: keydown => keyup => input =>change(焦点离开是触发) => blur
拖动算法
键盘事件
注意点
鼠标事件
mouseenter: 鼠标指针穿过被选元素边界,后代元素不会触发,对应leave该方法不会冒泡
mouseleave: 鼠标移出某个元素时触发, 后代元素不会触发, 该方法不会冒泡
mouseover:当鼠标经过被选元素和被选元素的子元素时都会触发mouseover事件,对应mouseout事件
mouseout:鼠标移出目标的上方。
mousemove:鼠标在目标的上方移动, 移动一个像素点都会,一般要节流。
hover: Jquery中
mousedown => mouseup => click
hover是指分别当鼠标指针进入和离开元素时被执行的事件相当于mouseenter+mouseleave。而mouseover鼠标进入某个元素或其子元素时触发。
鼠标位置相关
通过鼠标在网页上的点击,我们还可以获得许多有用的参数,如获得当前鼠标的坐标。根据其参照物的不同,分为以下几套坐标系。一套是以当前浏览器的可视区为参照物(clientX, clientY),另一套是以显示器的屏幕为参照物(screenX, screenY)。此外微软还有一套坐标系(x,y),它是相对于触发事件的对象的offsetParent的,火狐有另一套坐标系(pageX, pageY),它是相对于当前网页的。我们可以通过如下函数来获得鼠标在网页的坐标。
光标控制
获取和修改光标位置
光标样式修改
input框中相关事件
拖动算法