Question

我有一个可点击的项目，其中也包含子元素。我的问题源于想要通过使用1px翻译来动画：点击项目的活动状态。

点击的moused落在子元素上
1px translate 从鼠标指针下移动子元素
现在，mouseup事件发生在父元素

这会导致点击取消。我可以阻止子元素在CSS中使用pointer-events: none来捕获点击，但由于它既新又不稳定，我很乐意找到更兼容的修复。现在，我已经决定只在整个项目的顶部贴一个透明的DIV，但那很难看。

此笔中的夸张演示：http://codepen.io/JonFabritius/pen/mJuzy

尝试单击橙色条的下半部分，指针仍保留在子元素的顶部。然后单击上半部分，这会导致元素从指针下移动。

它可能正盯着我看，但我找不到一个简单的解决办法 - 任何想法都值得赞赏。

Answer 1

免责声明：我不是jQuery。

这是一个更好地被视为评论的回复，但增加了代码。

你说“点击目标是父母” - 抱歉这里有点厚，但当你说它是点击目标时，是父有事件监听器附加到它的元素，或click target，你的意思是它是evt.target返回的值吗？（其中evt是传递给事件处理函数的单个变量）

为了更好地说明我的目标，请考虑以下代码：

JS部分：

window.addEventListener('load', mInit, false);

function mInit()
{
    document.getElementById('clickTarget').addEventListener('click', handleClick, false);
}

function handleClick(evt)
{
    console.log(this.id + ': is the id of the "this" element');
    console.log(evt.target.id + ": was the id of the evt.target");
}

HTML部分：

<body>
    <div id='clickTarget'><a id='link1'>Link1</a><a id='link2'>Link2</a></div>
</body>

现在，当您单击link1时，控制台中显示的输出为：

clickTarget: is the id of the "this" element
link1: was the id of the evt.target

可以预见，点击link2会显示以下信息：

clickTarget: is the id of the "this" element
link2: was the id of the evt.target

因此，您可以清楚地看到，在此示例中，<div>是两个<a>元素的父级。然而，在每个实例中，目标都是不同的 - 它不是父项，它是被点击的实际元素。

你已经使用了jQuery，虽然简单的添加功能，但隐藏了实现细节，减慢了JS的执行速度，并且（通常）不必要地增加了页面权重。你的代码非常短而且很甜，但返回的内容需要进行一些调查 - 这当然不是很明显。

作为旁注，快速浏览一下jQuery Docs：jQuery .delegate告诉我们，从jQuery 1.7开始，用于实现此功能的首选方法是.on() - 它可能没有任何后果，但是一个人永远不会知道..

Answer 2

~~如果你使用当前的.on语法，它会正常工作：~~

$（function（）{ //目标ON事件，委托 $（＆＃39;＃container＆＃39;）。on（＆＃39;点击＆＃39;，＆＃39; .item＆＃39;，function（）{ $（＆＃39; .item＆＃39;）追加。（＆＃39; *＆＃39;）; }）; }）;

更新您可以使用自定义类执行此操作吗？只要指针不离开.item元素，这似乎就可以工作。子元素的行为与预期一致。

$(function() {

  $('#container').on('mousedown', '.item', function() {
      $(this).addClass('active');
      $('.item').append('*');
  }).on('mouseup', '.item', function() {
      $(this).removeClass('active');
  });

});

DEMO：http://codepen.io/anon/pen/lponk

在jQuery单击委托中的两个不同元素上的鼠标上/下取消单击事件

2 个答案: