*新闻详情页*/>
由于下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下。
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 网页设计_移动端网页设计_大一网页设计作业成品_网页编辑软件_网页在线编辑 版权所有 (网站地图) 粤ICP备10235580号