vue 移动高亮 移出取消

你好！针对你的问题，我理解你是想实现在移动端中，鼠标或手指点击某个元素时，给该元素添加高亮效果，并且在移出该元素时取消高亮效果。如果我的理解有误，请纠正我。

针对这个问题，我可以给你提供以下的思路：

1. 在点击事件中，通过 JS 获取被点击的元素，并为该元素添加一个指定的 CSS 类，该类定义了高亮效果的样式；
2. 在移动事件中，通过 JS 获取当前手指所在的元素，并判断该元素是否为之前被点击的元素；
3. 如果是，则不做任何操作，保持原先的高亮状态；
4. 如果不是，则移除之前被点击元素的高亮效果，并为当前元素添加高亮效果。

下面是一个简单的示例代码，仅供参考：

<!-- HTML 结构 -->
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

/* CSS 样式 */
.highlight {
  background-color: yellow;
}

// JS 代码
var prevElement = null;

// 点击事件
document.querySelectorAll('.item').forEach(function(item) {
  item.addEventListener('click', function() {
    // 移除之前被点击元素的高亮效果
    if (prevElement !== null) {
      prevElement.classList.remove('highlight');
    }
    // 为当前元素添加高亮效果
    item.classList.add('highlight');
    prevElement = item;
  });
});

// 移动事件
document.addEventListener('touchmove', function(event) {
  var currentElement = document.elementFromPoint(event.touches[0].pageX, event.touches[0].pageY);
  if (currentElement !== prevElement) {
    if (prevElement !== null) {
      prevElement.classList.remove('highlight');
    }
    if (currentElement.classList.contains('item')) {
      currentElement.classList.add('highlight');
      prevElement = currentElement;
    }
  }
});

这段代码的实现思路是：为每个元素绑定点击事件，在点击时添加高亮效果，并记录当前被点击的元素；同时在整个页面上绑定移动事件，通过获取当前手指所在的元素，来判断是否需要添加或移除高亮效果。请注意，这段代码仅是一个简单的示例，并未考虑到一些特殊情况，如需要在移动结束时清除高亮效果等问题，需要根据实际需求进行修改和完善。