Question

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

请建议在解决方法时可以做什么，因为我正在为某些鼠标悬停效果工作，当手指进入元素时触发事件，而不是当用户再次提起并触摸元素时触发。

谢谢：）

Answer 1

我建议您使用

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

关于touchmove事件。

Answer 2

您引用了old draft，the latest one removed the touchenter and touchleave events。

Answer 3

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!');
});

Answer 4

当前，核心上尚不支持此类事件，但是可以对它们进行模拟。

模拟触摸输入，触摸离开事件的最佳方法是在文档级事件中使用elementFromPoint

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

使用className的示例

var onTouchEnterEvents = [];
var 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);
            }
        });
    };
};

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

///HOW TO USE
onTouchEnter('.my-element', function () {
    console.log('IT WORKS');
});

This GIST包含与上面相同的代码，为了进行改进，请在此处创建注释。

Answer 5

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

Touchenter和touchleave事件支持

5 个答案: