在jQuery中的同一div中分离“点击文本”和“点击背景”事件[重复]

Question

假设有一个带有文本的<div>。文本用<br> 分成几行。如果我们在其中移动光标，最终光标图像会变为“文本”。如果我们将光标移到一边，它的图像会变回“默认”，但我们可能会停留在<div> 内。

示例：

HTML

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

编译好的html

此处为长文本
短文本

如果我们将鼠标移动到“one”和“here”之间的位置，鼠标指针会在相同的<div> 中发生变化。问题是：是否可以使用 jQuery 将同一 <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 和所有跨度。您需要针对您的代码进行优化。