Question

我已经在mousemove事件中获得目标，但是我没有在ipad和android的touchleave事件中获得目标。

<!DOCTYPE html>
<html>
<body>

<svg width="300" height="200" style="border:0px solid #ccc;">
    <polygon id="a" points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

<script>

document.getElementById('a').addEventListener('mousemove', function(e) {
    document.getElementById("a").style.fill = 'red';
}, false);

document.getElementById('a').addEventListener('mouseleave', function(e) {
    document.getElementById("a").style.fill = 'lime';
}, false);

document.getElementById('a').addEventListener('touchmove', function(e) {
   document.getElementById("a").style.fill = 'red';
}, false);

document.getElementById('a').addEventListener('touchleave', function(e) {
   document.getElementById("a").style.fill = 'lime';
}, false);

</script>

</body>
</html>

Answer 1

没有＆＃34; touchleave＆＃34;事件。显然有一个提议的规范，但it was never implemented。如果您想知道用户触摸何时离开某个区域，最好的办法是手动跟踪touchmove事件并从那里找出它。

Answer 2

触摸有三个事件。

touchstart
touchmove
touchend

使用触摸事件时请注意'鬼点击'！

Answer 3

由于svg四面环绕多边形，您可以这样做：

将touchmove事件放在svg：

上

var svg = document.querySelector('svg');
var polygon = document.getElementById("a");

svg.addEventListener('touchmove', function(e) {
   if (e.target === polygon) { 
      // touch is inside polygon
      polygon.style.fill = 'red';
   } else {
      // touch is outside polygon
      polygon.style.fill = 'lime';
   }
}, false);

（要使此代码适用于所有浏览器，您必须稍微修改一下）

如何找到touchmove更改为其他对象

3 个答案: