JQuery mobile：在多个元素上进行一次触摸移动就像鼠标悬停一样

Posted 2023-03-06

【中文标题】JQuery mobile：在多个元素上进行一次触摸移动就像鼠标悬停一样

【英文标题】：JQuery mobile: make a single touch-move over multiple elements behave like mouse hover

【发布时间】：2017-04-23 02:51:23

【问题描述】：

我见过很多similar questions，但令人惊讶的是它们完全不同。

我希望拥有触摸屏的用户能够一次将他的手指拖过页面上的多个元素，并且当他的手指从一个元素移动到另一个元素时，让这些元素触发类似于 if鼠标移到他们身上。所以每个元素都会触发与touchenter 和touchleave 事件等价的东西。

JQuery mobile 支持许多触摸事件：touchstart、touchend、touchmove、touchcancel、tap、swipe、taphold，但我似乎无法使用它们来实现它。

假设我有 n 个元素，我有这样的代码：

        function applyDown(idx) /*...*/ 
        function applyUp(idx) /*...*/ 
        function go(idx, fn)
            return function()
                fn(idx);
            
        
        for (var i = 0; i < n; i++)
            $(".element_"+i).on("touchstart", go(i, applyDown));
            $(".element_"+i).on("touchmove", go(i, applyDown));
            $(".element_"+i).on("touchend", go(i, applyUp));
        

如果我开始触摸一个元素并滑动到另一个元素，然后释放，第二个元素永远不会调用 applyDown()，而当手指从屏幕上释放时，第一个元素只会调用 applyUp()（而它应该在手指离开元素后立即调用）。

我怎样才能实现我想要的？

我在上面使用了touchmove，因为我认为它可以解决问题，但无论有没有它，行为都是相同的。

这些元素实际上是复杂的 SVG 形状，所以我不知道它是否会排除一些 hacky(?) 替代方案，例如，使用 javascript 计算手指在任何时间点上的哪个元素。

【参考方案1】：

我最终使用了 hacky 解决方案：在给定触摸位置的情况下寻找 SVG 元素：

        $(document).on("touchmove touchstart", function(event)
            var x = event.originalEvent.touches[0].pageX;
            var y = event.originalEvent.touches[0].pageY;
            var e = document.elementFromPoint(x, y);
            // remove existing hover effects
            $(".element")
                    .attr("stroke-width", "1")
                    .attr("stroke", "#bbb")
                    .attr("fill", "#eee");
            // add hover effect to matching element
            $(e).filter(".element")
                    .attr("stroke-width", "2")
                    .attr("stroke", "#181")
                    .attr("fill", "#afa");
        );
        $(document).on("touchend", function(event)
            $(".element")
                    .attr("stroke-width", "1")
                    .attr("stroke", "#bbb")
                    .attr("fill", "#eee");
        );