Question

假设有一个带有文字的<div>。文本分为<br>行。如果我们将光标移动到其中，最终光标图像将变为“text”。如果我们将光标稍微移开，它的图像会变回“默认”，但我们可能会保持在<div>范围内。

示例：

HTML

<div> long text here <br> short one <div>

已编译的HTML

这里的长篇文章是短篇

如果我们将鼠标移动到“one”和“here”之间的位置，鼠标指针会在同一<div>内变化。问题是：是否可以使用jQuery将用“text”指针和“default”指针在同一<div>内完成的单击事件分开？

Answer 1

您指的是css cursor属性。

如果光标发生变化，那是因为鼠标位于具有不同cursor值的元素上，这意味着（当然）每个元素都可以根据点击事件单独定位。

对于这种特殊情况，请将文字换成跨度，然后您将实现以下目标：

<div> <span>long text here</span> <br> <span>short one</span> <div>

由于您已经标记了jQuery，因此您可以选择绑定事件处理程序，如下所示：

$('span').click(function(event)
{
   alert('span clicked');
   event.stopPropagation();
});

$('div').click(function(event)
{
   alert('div clicked');
});

很少有事情需要注意：

http://api.jquery.com/event.stoppropagation/停止传播是一种阻止你的事件冒泡的方法。跨度在div内，所以从技术上讲，如果你的跨度被点击了 - 你的div也是如此。您希望在跨度点击事件处理程序中停止它，因此我在跨度点击处理程序上调用了stopPropagation()。

另请注意，我选择基于div和span，这将选择所有div和所有跨度。您希望针对您的代码优化此功能。

在jQuery中将相同div中的“单击文本”和“单击背景”事件分开

1 个答案: