IPad/iPhone 悬停问题导致用户双击链接

我有一些网站,我以前建立的时候,使用 jquery 鼠标事件... 我刚得到一个 ipad,我注意到,所有的鼠标事件翻译为点击... 例如,我必须做两个点击,而不是一个。.(第一个悬停,比实际点击)

有没有解决这个问题的方法? 也许我应该用 jquery 命令来代替 mouseover/out 等等..。 谢谢!

150212 次浏览

你可以这样检查 navigator.userAgent:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
//bind your mouseovers...
}

但是你必须检查黑莓,机器人,数不清的其他触摸屏设备。你也可以只在 userAgent 包含 Mozilla、 IE、 Webkit 或 Opera 的情况下绑定鼠标悬停,但是你仍然需要屏幕搜索一些设备,因为例如 Droid 会报告 userAgent 字符串如下:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

IPhone 的字符串也是类似的。如果你只是在屏幕上显示 iPhone、 iPod、 iPad、 Android 和黑莓,你可能会得到大部分手持设备,但不是全部。

我认为尝试用 mouseenter代替 mouseover是明智的。它是绑定到 .hover(fn,fn)时在内部使用的,通常是您想要的。

我“认为”你的链接没有 onmouseover 事件,其中一个点击激活 onmouseover 和双击激活链接。但是我。我没有 iPad。 我觉得你应该用手势和触摸。

Https://developer.apple.com/documentation/webkitjs

虽然还没有完全测试过,但是由于 iOS 会触发触摸事件,假设您使用的是 jQuery 设置,那么这个方法可以工作。

$('a').on('click touchend', function(e) {
var el = $(this);
var link = el.attr('href');
window.location = link;
});

这个想法是,Mobile WebKit 在点击结束时触发一个 touchend事件,所以我们监听这个事件,然后在链接触发一个 touchend事件后立即重定向浏览器。

我也有同样的问题,但不是在触摸设备上。每次单击时,该事件都会触发。有一些关于事件队列的东西。

然而,我的解决方案是这样的: 点击事件(或触摸?)你设了个计时器。如果在 X ms 内再次单击链接,则返回 false。

要设置每个元素的计时器,可以使用 $.data()

这也可以解决上面描述的@Ferdy 问题。

看来还是有 CSS 解决方案的。Safari 等待第二次触摸的原因是: hover 事件上通常分配的背景图像(或元素)。如果没有显示-你不会有任何问题。解决方案是使用二级 CSS 文件(或 JS 方法中的样式)来瞄准 iOS 平台,它覆盖: 例如,悬停背景来继承,并保持隐藏要在鼠标上显示的元素:

下面是一个 CSS 和 HTML 的例子——一个在鼠标上有星号标签的产品块:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS:

.s {
background: url(some-image.png) no-repeat 0 0;


}
.s:hover {
background: url(some-image-r.png) no-repeat 0 0;
}


.s-star {
background: url(star.png) no-repeat 0 0;
height: 56px;
position: absolute;
width: 72px;
display:none;
}


.s:hover .s-star {
display:block;
}

解决方案(二级 CSS) :

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
background:inherit;
}
.s:hover .s-star {
display:none;
}

Cduruk 的解决方案非常有效,但是在我的网站的一些部分造成了问题。因为我已经在使用 jQuery 添加 CSS 悬停类,所以最简单的解决方案就是不在移动设备上添加 CSS 悬停类(或者更准确地说,只在不在移动设备上添加它)。

大概是这样的:

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);


if (!(ios)) {
$(".portfolio-style").hover(
function(){
$(this).stop().animate({opacity: 1}, 100);
$(this).addClass("portfolio-red-text");
},
function(){
$(this).stop().animate({opacity: 0.85}, 100);
$(this).removeClass("portfolio-red-text");
}
);
}

* 为说明目的而精简的代码

如果你使用的是 Modern izr,那么像前面提到的那样,使用 Modern izr.touch 是非常容易的。

然而,为了安全起见,我更喜欢结合使用 Modern izr.touch 和用户代理测试。

var deviceAgent = navigator.userAgent.toLowerCase();


var isTouchDevice = Modernizr.touch ||
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  ||
deviceAgent.match(/(iemobile)/) ||
deviceAgent.match(/iphone/i) ||
deviceAgent.match(/ipad/i) ||
deviceAgent.match(/ipod/i) ||
deviceAgent.match(/blackberry/i) ||
deviceAgent.match(/bada/i));


function Tipsy(element, options) {
this.$element = $(element);
this.options = options;
this.enabled = !isTouchDevice;
this.fixTitle();
};

如果你不使用现代化,你可以简单地用 ('ontouchstart' in document.documentElement)代替上面的 Modernizr.touch函数

还要注意的是,测试用户代理 iemmobile 将为您提供比 WindowsPhone 更广泛的检测到的 Microsoft 移动设备。

对我起作用的是这里的其他人已经说过的话:

不要在 hover 或 mousemove 上显示/隐藏元素(在我的例子中就是这种情况)。

以下是苹果公司的说法(https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html) :

可单击的元素是一个链接、表单元素、图像映射区域或任何其他具有 mousemove、 mousedown、 mouseup 或 onclick 处理程序的元素

如果用户点击一个可单击的元素,事件按照以下顺序到达: mouseover、 mousemove、 mousedown、 mouseup 和 click。此外,如果页面内容在 mousemove 事件上发生更改,则不会发送序列中的后续事件。此行为允许用户点击新内容。

因此,您可以使用@wop 的解决方案: 检测 userAgent,检查它是否和 iOS 设备,然后绑定事件。我最终使用这种技术,因为它适合我的需要,它更有意义不绑定悬停事件时,你不想要它。

但是... ... 如果你不想在 hover/mousemove 中混淆 userAgent 并隐藏/显示元素,我发现你可以通过使用本地 javascript 来做到这一点,比如:

$("body").on("mouseover", function() {
document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

这将在桌面版本上工作,在移动版本上什么也不做。

为了更加兼容。

$("body").on("mouseover", function() {
if (document.getElementsByTagName && document.querySelector) { // check compatibility
document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
document.querySelector(".my-selector div").style.display = 'none'; // hide element
} else {
$(".my-class").show();
$(".my-selector div").hide();
}
});

你可以用 click touchend,

例如:

$('a').on('click touchend', function() {
var linkToAffect = $(this);
var linkToAffectHref = linkToAffect.attr('href');
window.location = linkToAffectHref;
});

以上例子将影响触摸设备上的所有链接。

如果你想只针对特定的链接,你可以通过设置一个类来做到这一点,即:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
var linkToAffect = $(this);
var linkToAffectHref = linkToAffect.attr('href');
window.location = linkToAffectHref;
});

干杯,

Jeroen

你的问题并不完全清楚,但如果你只是想消除双击,同时保留鼠标的悬停效果,我的建议是:

  • touchstartmouseenter上添加悬停效果。
  • 消除对 mouseleavetouchmoveclick的悬停效果。

背景资料

为了模拟鼠标,像 Webkit 这样的浏览器会在用户触摸触摸屏时触发以下事件(比如 iPad)(来源: html5rocs.com 上的 触摸与鼠标) :

  1. touchstart
  2. touchmove
  3. touchend
  4. 300毫秒的延迟,浏览器确保这是一个单击,而不是双击
  5. mouseover
    • 注意 : 如果 mouseovermouseentermousemove事件更改页面内容,则永远不触发以下事件。
  6. mousemove
  7. mousedown
  8. mouseup
  9. click

似乎不可能简单地告诉 Web 浏览器跳过鼠标事件。

更糟糕的是,如果鼠标悬停事件改变了页面内容,那么单击事件永远不会被触发,正如在 Safari Web 内容指南-处理事件上解释的那样,特别是在 单指活动中的图6.4。究竟什么是“内容变更”,将取决于浏览器和版本。我发现,对于 iOS 7.0,背景颜色的改变不是(或者不再是?)内容的改变。

解答

总结一下:

  • touchstartmouseenter上添加悬停效果。
  • 消除对 mouseleavetouchmoveclick的悬停效果。

请注意,在 touchend上没有操作!

这显然适用于鼠标事件: 触发 mouseentermouseleave(略有改进的 mouseovermouseout版本) ,并添加和删除悬停。

如果用户实际上使用 clicks 链接,那么悬停效果也会被移除。这样可以确保当用户在浏览器中按下后退按钮时将其删除。

这也适用于触摸事件: 在 touchstart上添加了悬停效果。在 touchend上删除了「不」。它在 mouseenter上再次添加,由于这不会导致内容更改(它已经被添加了) ,因此也会触发 click事件,并且不需要用户再次单击就可以跟踪链接!

浏览器在 touchstart事件和 click事件之间的300毫秒延迟实际上得到了很好的利用,因为悬停效果将在这短时间内显示出来。

如果用户决定取消点击,手指的一个移动将这样做正常。通常,这是一个问题,因为没有触发 mouseleave事件,并且悬停效应仍然存在。谢天谢地,这可以很容易地通过消除悬停效应的 touchmove

就是这样!

注意,可以消除300ms 的延迟,例如使用 快速点击库,但这超出了这个问题的范围。

替代解决方案

我发现以下几种选择存在以下问题:

  • 浏览器检测: 极易出错。假设一个设备有鼠标或者触摸,当触摸显示越来越多的时候,两者的结合将会变得越来越普遍。
  • CSS 媒体检测: 我所知道的唯一只有 CSS 的解决方案。仍然容易出错,并且仍然假设一个设备有鼠标或触摸,虽然两者都有可能。
  • touchend中模拟单击事件: 这将错误地跟踪链接,即使用户只想滚动或缩放,而没有实际单击链接的意图。
  • 使用一个变量来抑制鼠标事件: 这在 touchend中设置一个变量,在后续的鼠标事件中作为 if 条件使用,以防止该时间点的状态更改。变量在 click 事件中重置。如果你真的不想在触摸界面上出现悬停效果,这是一个不错的解决方案。不幸的是,如果由于其他原因触发了 touchend,而且没有触发点击事件(例如用户滚动或放大) ,并且随后试图用鼠标跟踪链接(例如在同时具有鼠标和触摸界面的设备上) ,那么这种方法就不起作用。

进一步阅读

参见 IPad/iPhone 双击问题禁用移动浏览器上的悬停效果

我曾经遇到过类似的情况,事件绑定到一个元素的 mouseenter/mouseleave/click 状态,但是在 iPhone 上,用户必须双击该元素来首先触发 mouseenter 事件,然后再次触发 click 事件。

我使用与上面类似的方法解决了这个问题,但是我使用了 jQuery $。浏览器插件(用于 jQuery 1.9 >) ,并添加了一个。触发器事件到 mouseenter 绑定事件,如下所示:

// mouseenter event
$('.element').on( "mouseenter", function() {
// insert mouseenter events below


// double click fix for iOS and mouseenter events
if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() {
// insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
// insert click events below
});

那个。触发器通过触发。在 iPhone 或 iPad 上查看元素时,在鼠标输入(或初始单击)上单击事件处理程序。可能不是最优雅的解决方案,但它在我的情况下工作得很好,利用了一个插件,我已经到位,并要求我添加一行代码,以使我的现有事件在这些设备下工作。

您可以在这里获得 jQuery $. 浏览器插件: https://github.com/gabceb/jquery-browser-plugin

我在现有的解决方案中遇到了以下问题,并且找到了似乎可以解决所有问题的方法。这里假设您的目标是跨浏览器、跨设备,并且不希望设备嗅探。

这解决了很多问题

仅使用 touchstarttouchend:

  • 当人们是 试图滚动过去的内容并且当他们开始滑动时碰巧手指在这个元素上时导致事件触发-意外地触发这个动作。
  • 可能导致事件触发 在 Longpress 上,类似于桌面上的右键单击。例如,如果您的单击事件转到 URL X,并且用户长按以在一个新的选项卡中打开 X,那么用户会感到困惑,以为在两个选项卡中都打开了 X。在一些浏览器(如 iPhone)上,它甚至可能阻止长按菜单的出现。

touchstarttouchmove上触发 mouseover事件的后果没有那么严重,但确实会干扰通常的浏览器行为,例如:

  • 长时间的按压会触发一个永无止境的鼠标。
  • 许多 Android 浏览器将手指在 touchstart上的位置视为 mouseover,而 mouseover在下一个 touchstart上是 mouseouted。因此,在 Android 中查看鼠标悬停内容的一种方法是触摸感兴趣的区域,动动手指,轻轻地滚动页面。将 touchmove当作 mouseout来处理。

解决办法

理论上,你可以在 touchmove上添加一个标志,但是即使没有移动,iPhone 也会触发触摸。理论上,你可以只比较 touchstarttouchend事件 pageXpageY 但是在 iPhone 上,没有 ABC2 ABC3或者 pageY

So unfortunately to cover all bases it does end up a little more complicated.

$el.on('touchstart', function(e){
$el.data('tstartE', e);
if(event.originalEvent.targetTouches){
// store values, not reference, since touch obj will change
var touch = e.originalEvent.targetTouches[0];
$el.data('tstartT',{ clientX: touch.clientX, clientY: touch.clientY } );
}
});
$el.on('touchmove', function(e){
if(event.originalEvent.targetTouches){
$el.data('tstartM', event.originalEvent.targetTouches[0]);
}
});


$el.on('click touchend', function(e){
var oldE = $el.data('tstartE');
if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
$el.data('tstartE',false);
return;
}
if( $el.data('iosTouchM') && $el.data('tstartT') ){
var start = $el.data('tstartT'), end = $el.data('tstartM');
if( start.clientX != end.clientX || start.clientY != end.clientY ){
$el.data('tstartT', false);
$el.data('tstartM', false);
$el.data('tstartE',false);
return;
}
}
$el.data('tstartE',false);

理论上,有 如何得到长压机使用的确切时间,而不是仅仅使用1000作为近似值,但在实践中,这并不是那么简单,最好使用一个合理的代理

只是一个改进,以避免重定向时,您滑动您的手指在链接错误。

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {


// if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
if (e.type == 'touchmove') {
$.data(this, "touchmove_cancel_redirection", true );
return;
}


// if it's a simple touchend, data() for this element doesn't exist.
if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
var el = $(this);
var link = el.attr('href');
window.location = link;
}


// if touchmove>touchend, to be redirected on a future simple touchend for this element
$.data(this, "touchmove_cancel_redirection", false );
});

受到 MacFreak 的启发,我做了一些适合自己的东西。

这个 js 方法可以防止鼠标悬停在 ipad 上,并且在某些情况下可以防止将点击记录为两次点击。在 CSS 中,如果您有任何: hover psudo 类在您的 CSS 中,将它们更改为。例如。盘旋到。一流的。盘旋

在 ipad 上测试这段代码,看看 css 和 js 的 hover 方法有什么不同(只有 hover 效果)。CSS 按钮没有花哨的点击提醒。 Http://jsfiddle.net/bensontrent/ctgr6stm/

function clicker(id, doStuff) {
id.on('touchstart', function(e) {
id.addClass('hover');
}).on('touchmove', function(e) {
id.removeClass('hover');
}).mouseenter(function(e) {
id.addClass('hover');
}).mouseleave(function(e) {
id.removeClass('hover');
}).click(function(e) {
id.removeClass('hover');
//It's clicked. Do Something
doStuff(id);
});
}


function doStuff(id) {
//Do Stuff
$('#clicked-alert').fadeIn(function() {
$(this).fadeOut();
});
}
clicker($('#unique-id'), doStuff);
button {
display: block;
margin: 20px;
padding: 10px;
-webkit-appearance: none;
touch-action: manipulation;
}
.hover {
background: yellow;
}
.btn:active {
background: red;
}
.cssonly:hover {
background: yellow;
}
.cssonly:active {
background: red;
}
#clicked-alert {
display: none;
}
<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>


</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

为了让链接在不中断触摸滚动的情况下工作,我用 jQuery Mobile 的“点击”事件解决了这个问题:

    $('a').not('nav.navbar a').on("tap", function () {
var link = $(this).attr('href');
if (typeof link !== 'undefined') {
window.location = link;
}
});

MacFreak 的回答对我非常有帮助。以下是一些实际操作代码,以防它对你有帮助。

问题 -应用 说得好意味着每当你的手指在一个元素上滚动时,它的反应就好像你已经按下了它,即使你只是试图滚动过去。

我正在用 jQuery 创建一个效果,它在一些按钮下面淡出一行来“突出显示”悬浮按钮。我不希望这意味着你必须在触摸设备上按两次按钮才能点击链接。

这是按钮:

<a class="menu_button" href="#">
<div class="menu_underline"></div>
</a>

我希望“ menu _ underline”div 在 mouseover 上淡出,在 mouseout 上淡出。但是我希望触摸设备能够跟随链接一次点击,而不是两次。

解决方案 -以下是使其工作的 jQuery:

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
$(this).find(".menu_underline").fadeIn();
});


//Mouse Out
$('.menu_button').bind('mouseleave touchmove click', function(){
$(this).find(".menu_underline").fadeOut();
});

非常感谢你对这个 MacFreak 的帮助。

我知道我来晚了,但这是我找到的最简单的解决办法之一:

    $('body').on('touchstart','*',function(){   //listen to touch
var jQueryElement=$(this);
var element = jQueryElement.get(0); // find tapped HTML element
if(!element.click){
var eventObj = document.createEvent('MouseEvents');
eventObj.initEvent('click',true,true);
element.dispatchEvent(eventObj);
}
});

这不仅适用于链接(锚标记) ,也适用于其他元素。希望这有所帮助。

只要做一个 CSS 媒体查询,排除平板电脑和移动设备,并把鼠标悬停在那里。您实际上并不需要 jQuery 或 JavaScript 来实现这一点。

@media screen and (min-device-width:1024px) {
your-element:hover {
/* Do whatever here */
}
}

一定要把它添加到你的 html 头,以确保它计算的实际像素,而不是分辨率。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

这个简短的片段似乎起作用了。 点击链接时触发点击事件:

  $('a').on('touchstart', function() {
$(this).trigger('click');
});

我刚刚发现,如果你添加一个空的监听器,它就能工作,不要问我为什么,但是我在 iPhone 和 iPad 上用 iOS9.3.2进行了测试,它工作得很好。

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
var elements = document.getElementsByTagName('a');
for(var i = 0; i < elements.length; i++){
elements[i].addEventListener('touchend',function(){});
}
}

其他答案都不适合我。我的应用程序有很多事件监听器,自己的复选框和链接,有监听器和没有监听器的链接。

我用这个:

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
if ($(this).data("touched") === true) {
e.stopImmediatePropagation();
return false;
}
return;
}).on("touchend", selector, function (e) {
if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
// user action is not a tap
return;
var $this = $(this);
// Visit: http://stackoverflow.com/questions/1694595/can-i-call-jquery-click-to-follow-an-a-link-if-i-havent-bound-an-event-hand/12801548#12801548
this.click();
// prevents double click
$this.data("touched", true);
if (timer)
clearTimeout(timer);
setTimeout(function () {
$this.data("touched", false);
}, 400);
e.stopImmediatePropagation();
return false;
}).on("touchstart", function (e) {
startX = e.originalEvent.changedTouches[0].screenX;
startY = e.originalEvent.changedTouches[0].screenY;
});

没必要把事情复杂化。

$('a').on('touchend', function() {
$(this).click();
});

当您有 jquery ui 下拉列表时,这对我很有用

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.ui-autocomplete').off('menufocus hover mouseover');
}

避免在 hover css 事件中更改“ display”样式。我在悬停状态下有“ display: block”。移除 ios 后,只需一次点击即可进行连接。顺便说一句,最新的 IOS 更新似乎修复了这个“特性”

解决双击 IPad 的最简单方法是在媒体查询 @media (pointer: fine)中包装你的 css 以获得悬停效果:

@media (pointer: fine) {
a span {
display: none;
}
a:hover span {
display: inline-block;
}
}

封装在此媒体查询中的 CSS 将仅应用于桌面。

解释这个解决方案是在这里 https://css-tricks.com/annoying-mobile-double-tap-link-issue/

感谢 麦克弗里克的回答,我想出了这个解决方案。当我发现有时一行中有两个 mousemove 事件没有触发 click 事件时,这种方法变得更高级了一些。

double mousemove

(function () {
//https://stackoverflow.com/a/42162450/3717718
function isIosSafari() {
var ua = (window.navigator && navigator.userAgent) || '';
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
return iOSSafari;
}
(function removeHoverIosSafari() {
if (!isIosSafari()) return;


// Tags of interest
function shouldPrevent(target) {
var tagName = target.tagName.toLowerCase();
var datasetBind = target.dataset.bind;
var preventFilter = (datasetBind && datasetBind.indexOf('click') > -1) || (tagName == 'a' || tagName == 'button');
return preventFilter;
}
var eventSelector = {
touchend: function (_, target) {
// Reset on touchend
target.dataset._clicked_ = '';
target.dataset._mousemove_ = '0';
target.dataset._timeOutId_ = '';
},
mouseover: function (e) {
e.preventDefault();
},
mousemove: function (e, target) {
e.preventDefault();


var _mousemoves = +(target.dataset._mousemove_ || '0');
_mousemoves = _mousemoves + 1;
console.log('mousemoves: ' + _mousemoves);
target.dataset._mousemove_ = _mousemoves;
if (_mousemoves > 1 && !target.dataset._timeOutId_) {
var id = setTimeout(function () {
console.log('double mousemove click fired');
target.click();
}, 80); // 80ms worked for me, could probably be lower
target.dataset._timeOutId_ = id;
}
},
click: function (e, target) {
if (target.dataset._clicked_) {
console.log('prevented doubleclick');
e.preventDefault();
return;
}
// prevent timeout click
if (target.dataset._timeOutId_) {
console.log('cleared timeout');
clearTimeout(+target.dataset._timeOutId_);
}
// mark element as clicked
target.dataset._clicked_ = 'true';
}
}
function preventHover(e) {
var target = e.target;
//There is no point in continuing if the item for unknown reasons doesnt't have a clickFunction, tagName or dataset (DOMStringMap)
if (!(target && target.click && target.tagName && target.dataset)) return;
if (!shouldPrevent(target)) return;
var type = e.type;
console.log(type, target);
eventSelector[type] && eventSelector[type](e, target);
}


document.addEventListener('touchend', preventHover, true);
document.addEventListener('mouseover', preventHover, true);
document.addEventListener('mousemove', preventHover, true);
document.addEventListener('click', preventHover, true);
})();
})();