javascript 触摸进入和触摸离开事件支持

jei2mxaa  于 2023-01-16  发布在  Java
关注(0)|答案(6)|浏览(201)

我在mozilla website和w3网站上读到了touchenter和touchleave事件,但找不到任何支持它的浏览器或任何模仿这种效果的javascript库。
请建议可以做什么,因为有变通办法,因为我正在为一些鼠标悬停一样的效果,事件被触发时,手指进入元素,而不是当用户解除和再次触摸元素。
谢谢:)

vxbzzdmp

vxbzzdmp1#

我建议你用
document.elementFromPoint(touch.x, touch.y);
在触摸移动事件上。

olmpazwi

olmpazwi2#

您正在引用old draft,最新的old draft删除了touchenter和touchleave事件。

iezvtpos

iezvtpos3#

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

ryevplcw

ryevplcw4#

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

c2e8gylq5#

    • 目前,内核不支持此类事件**,但可以模拟它们。

我创建了一个小脚本来使onTouchEnteronTouchLeave方法可用。非常简单的使用(要测试代码片段激活此网站的移动版本,或在智能手机浏览器上使用它)

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

下面的脚本使用 * document. elementFromPoint * 来实现这个魔术。
x一个一个一个一个x一个一个二个一个x一个一个三个一个
This GIST包含与上面相同的代码,如需改进,请在此处创建注解。

btqmn9zl

btqmn9zl6#

这对我很有效。在回调中,我只需要元素;不是鼠标/触摸事件,也不是上下文(不要在回调中使用“this”)。
pointer.ts

/**
 *  Simulate touchenter and touchleave by tracking touchmove. See https://stackoverflow.com/questions/23111671/touchenter-and-touchleave-events-support
 */
const touchEventSimulator = {

    // enterElementCallback stores element as key and callback as value
    enterElementCallback: new Map(),
    leaveElementCallback: new Map(),
    previousElement: null,

    init: function() {
        window.addEventListener('touchmove', event => {
            var currentElement = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY)
            if (currentElement !== this.previousElement) {

                // touch leave
                const leaveCallback = this.leaveElementCallback.get(this.previousElement)
                if (leaveCallback) {
                    leaveCallback.call(null, this.previousElement)
                }

                // touch enter
                const enterCallback = this.enterElementCallback.get(currentElement)
                if (enterCallback) {
                    enterCallback.call(null, currentElement)
                }

                // Current element will be the previous one, next time we check.
                this.previousElement = currentElement;
            }
        });
    },
    onEnter(element, callback) {
        this.enterElementCallback.set(element, callback);
    },
    onLeave(element, callback) {
        this.leaveElementCallback.set(element, callback);
    }
}

const mouseAvailable = matchMedia('(pointer:fine)').matches;

/**
 * Pointer is a wrapper for mouse and (simulated) touch events
 */
export const pointer = {
    mouseAvailable,

    init() {
        if (!mouseAvailable) {
            touchEventSimulator.init()
        }
    },

    onEnter: (element, callback) => {
        if (mouseAvailable) {
            element.addEventListener('mouseenter', ()=>callback.call(null, element))
        } else {
            touchEventSimulator.onEnter(element, callback)
        }
    },

    onLeave: (element, callback) => {
        if (mouseAvailable) {
            element.addEventListener('mouseleave', ()=>callback.call(null, element))
        } else {
            touchEventSimulator.onLeave(element, callback)
        }
    }
}

example.ts

import {pointer} from './pointer';

pointer.init();
const element = document.getElementById('test');
pointer.onEnter(anchor, element=>{
    console.log('enter', element)
})

pointer.onLeave(anchor, element=>{
    console.log('leave', element)
})

相关问题