由于下1环节要做的1个工作中是开发设计1个WEB端K线图，因此这1周1直在科学研究这层面的物品，在其中涉及到到的1个专业知识点是电脑鼠标滚轮恶性事件和Mac的触控板双指恶性事件，发现这里边還是有1些坑的。
1. 用哪一个恶性事件
The wheel event fires when the user rotates a wheel button on a pointing device (typically a mouse). This event replaces the non-standard deprecated mousewheel event.
之前常应用的mousewheel恶性事件早已慢慢被官方废料了，改用wheel恶性事件替代，因此这里会优先选择应用wheel，并向下适配。
此外，即便是wheel恶性事件，各访问器的主要表现也将会不尽同样，全是各大访问器自身的标准，官方并沒有1个规范，尽管我也不知道道为何。
2. 适配写法
// creates a global "addWheelListener" method
// example: addWheelListener( elem, function( e ) { console.log( e.deltaY ); e.preventDefault(); } );
(function(window,document) {
var prefix = "", _addEventListener, onwheel, support;
// detect event model
if ( window.addEventListener ) {
_addEventListener = "addEventListener";
} else {
_addEventListener = "attachEvent";
prefix = "on";
}
// detect available wheel event
support = "onwheel" in document.createElement("div") ? "wheel" : // 各个厂商的高版本号访问器都适用"wheel"
document.onmousewheel !== undefined ? "mousewheel" : // Webkit 和 IE1定适用"mousewheel"
"DOMMouseScroll"; // 低版本号firefox
window.addWheelListener = function( elem, callback, useCapture ) {
_addWheelListener( elem, support, callback, useCapture );
// handle MozMousePixelScroll in older Firefox
if( support == "DOMMouseScroll" ) {
_addWheelListener( elem, "MozMousePixelScroll", callback, useCapture );
}
};
function _addWheelListener( elem, eventName, callback, useCapture ) {
elem[ _addEventListener ]( prefix + eventName, support == "wheel" ? callback : function( originalEvent ) {
!originalEvent && ( originalEvent = window.event );
// create a normalized event object
var event = {
// keep a ref to the original event object
originalEvent: originalEvent,
target: originalEvent.target || originalEvent.srcElement,
type: "wheel",
deltaMode: originalEvent.type == "MozMousePixelScroll" ? 0 : 1,
deltaX: 0,
deltaZ: 0,
preventDefault: function() {
originalEvent.preventDefault ?
originalEvent.preventDefault() :
originalEvent.returnValue = false;
}
};
// calculate deltaY (and deltaX) according to the event
if ( support == "mousewheel" ) {
event.deltaY = - 1/40 * originalEvent.wheelDelta;
// Webkit also support wheelDeltaX
originalEvent.wheelDeltaX && ( event.deltaX = - 1/40 * originalEvent.wheelDeltaX );
} else {
event.deltaY = originalEvent.detail;
}
// it's time to fire the callback
return callback( event );
}, useCapture || false );
}
})(window,document);
这个是MDN 上强烈推荐的适配写法，能够看到这几个恶性事件的次序是 wheel > mousewheel > DOMMouseScroll。假如应用wheel恶性事件，event不做解决。不然，再次封裝了event。
3. 方位分辨
电脑鼠标滚轮的话，仅有上、下两个方位，可是假如是触碰板的双指个人行为的话，除上、下之外，也有左、右方位，和双指向内收拢、向外扩大4种状况，接下来，就对这几种状况做分辨解决。
function wheelEvent (e) {
if (Math.abs(e.deltaX) !== 0 && Math.abs(e.deltaY) !== 0) return console.log('沒有固定不动方位');
if (e.deltaX < 0) return console.log('向右');
if (e.deltaX > 0) return console.log('向左');
if (e.ctrlKey) {
if (e.deltaY > 0) return console.log('向内');
if (e.deltaY < 0) return console.log('向外');
} else {
if (e.deltaY > 0) return console.log('向上');
if (e.deltaY < 0) return console.log('向下');
}
}
历经检测，delta是用来分辨方位最好是的1个值，wheelDelta和detail都有各有的适配等难题。
deltaX是上下方位的拖动，deltaY是左右方位。
向里收拢是和向下翻转同样，向外扩大是和向上翻转同样。这是一切正常的客户习惯性，可是不便的是客观事实恰好和大家的习惯性相反，这样单纯性借助deltaY来分辨是区别不开的。
历经检测ctrlKey这个字段仅有在双指方位不1致时，才会为true。这样就可以区别开了，从而造成了6种状况，逐1解决。
因此上面的适配写法还必须将ctrlKey回到。
ctrlKey: originalEvent.ctrlKey || false,
这个难题处理了，以后会挤时间把K线图的编码梳理1下。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。