在 jQuery 中分隔同一 div 中的"click on text"和"click on background"事件

Question

假设有一个带有文本的<div>。文本被分成行，带有 <br> .如果我们在其中移动光标，最终光标图像将变为"文本"。如果我们将光标移到一边一点，它的图像会变回"默认"，但我们可能会保持在<div>内。

示例：

.HTML

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

编译的网页

版

长文本在这里短
一

如果我们将鼠标移动到"一"和"这里"之间的位置，鼠标指针会在同一<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和所有跨度。您需要为您的代码优化这一点。