Touchenter 和 touchleave 事件支持答案

【问题标题】：Touchenter and touchleave events supportTouchenter 和 touchleave 事件支持
【发布时间】：2014-05-31 10:58:50
【问题描述】：

我在 mozilla website 和 w3 website 阅读了有关 touchenter 和 touchleave 事件的信息，但找不到任何支持它的浏览器或任何模仿该效果的 javascript 库。

请提出解决方法，因为我正在处理类似鼠标悬停的效果，当手指进入元素时触发事件，而不是当用户再次抬起并触摸元素时触发。

谢谢:)

【问题讨论】：

标签： javascript html google-chrome web-applications

【解决方案1】：

目前，核心不支持此类事件，但可以模拟它们。

我创建了一个小脚本来使 onTouchEnter 和 onTouchLeave 方法可用。非常简单的使用（测试sn-p 激活本网站手机版，或在智能手机浏览器上使用）

onTouchEnter('.some-selector', function(element,event){/*DO ANYTHING*/})
onTouchLeave('.some-selector', function(element,event){/*DO ANYTHING*/})

下面的脚本使用 document.elementFromPoint 来制造魔法。

let onTouchLeaveEvents = [];
let onTouchEnterEvents = [];
const onTouchEnter = function (selector, fn) {
    onTouchEnterEvents.push([selector, fn]);
    return function () {
        onTouchEnterEvents.slice().map(function (e, i) {
            if (e[0] === selector && e[1] === fn) {
                onTouchEnterEvents.splice(1, i);
            }
        });
    };
};

const onTouchLeave = function (selector, fn) {
    onTouchLeaveEvents.push([selector, fn]);
    return function () {
        onTouchLeaveEvents.slice().map(function (e, i) {
            if (e[0] === selector && e[1] === fn) {
                onTouchLeaveEvents.splice(1, i);
            }
        });
    };
};

let lastTouchLeave;
let lastTouchEnter;
document.addEventListener('touchmove', function (e) {
    var el = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
    if (!el) return;
  
  onTouchLeaveEvents.map((event) => {
    if (el!=lastTouchEnter && lastTouchEnter && lastTouchEnter.matches(event[0])) {
      
        
            if (lastTouchEnter !== lastTouchLeave ) {
                event[1](lastTouchEnter, e);
        lastTouchLeave = lastTouchEnter;
        lastTouchEnter = null
            }
            
        }
    });
  
    onTouchEnterEvents.map((event) => {
        if (el.matches(event[0]) && el!==lastTouchEnter) {
            lastTouchEnter = el;
      lastTouchLeave = null;
      event[1](el, e);
     }
    });

});

onTouchEnter('.area',function(el,e){
  el.classList.add('hover')
})
onTouchLeave('.area',function(el,e){
  el.classList.remove('hover')
})

.area {
  width:100px;
  height:100px;
  margin:2px ;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  float:left;
}
.area.hover{
  background-color:#333 !important;
  color:#fff;
}
#div-1{background-color:#f00;}
#div-2{background-color:#0f0;}
#div-3{background-color:#00f;}
body{
overflow:hidden
}

<div id="div-1" class="area">DIV 1</div>
<div id="div-2" class="area">DIV 2</div>
<div id="div-3" class="area">DIV 3</div>

This GIST 包含与上面相同的代码，如需改进，请在此处创建 cmets。

【讨论】：

【解决方案2】：

W3C 去掉了 ontouchenter 和 ontouchleave，所以我们只能做这些（用 zepto.js, touch.js, ontouchmove, elementFromPoint）：

var last_touched_button='';
$('#container,#button1,#button2').on('touchmove',function(e){
      var ele=document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY);
      if (ele==document.getElementById('button1'))
      {last_touched_button='button1';
      }
      else if (ele==document.getElementById('button2'))
      {last_touched_button='button2';
      }
});
$('#container,#button1,#button2').on('swipeLeft',function(e){
      console.log('the button '+last_touched_button+' triggered swipe_into_left_side event or swipe_out_from_left_side event!');
});

【讨论】：

【解决方案3】：

您引用的是old draft、the latest one removed the touchenter and touchleave events。

【讨论】：

【解决方案4】：

我建议你使用

document.elementFromPoint(touch.x, touch.y);

在 touchmove 事件中。

【讨论】：

$('#container,#button1').on('swipeUp',function(e) {...});
这绝对是正确的答案。然而错过了重要的事情，自己的操作方法

【解决方案5】：

有一个列表here 说明了版本兼容性。目前 Chrome、Opera、iOS Safari、Android 浏览器、黑莓浏览器、Opera Mobile、Chrome for Android、Firefox for android 支持此功能

【讨论】：