-1

我有一个可点击的项目，它也包含子元素。我的问题源于想要通过使用 1px 翻译来为单击项目的 :active 状态设置动画。

  1. 单击的 mousedown 落在子元素上
  2. 1px 平移将子元素从鼠标指针下方移动
  3. mouseup 事件现在发生在父元素上

这会导致点击被取消。我可以防止子元素pointer-events: none在 CSS 中捕获点击，但由于它既新又不稳定，我很想找到一个更兼容的修复程序。现在，我已经决定在整个项目上贴一个透明的 DIV，但这很难看。

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

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

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

4

2 回答 2

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 文档：jQuery .delegate告诉我们，从 jQuery 1.7 开始，实现此功能的首选方法是.on()- 它可能没有任何后果，但人们永远不知道..

于 2013-10-20T21:09:43.237 回答
0

事实证明，如果您使用当前.on语法，它可以正常工作：

$(function() { // 目标 ON 事件，委托 $('#container').on('click', '.item', function() { $('.item').append('*') ; }); });

更新您可以使用自定义类来做到这一点吗？只要指针不离开.item元素，这似乎就可以工作。子元素的行为符合预期。

$(function() {

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

});

演示：http ://codepen.io/anon/pen/lponk

于 2013-10-21T13:41:27.943 回答