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

Question

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

示例:

HTML

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

已编译html

长文在这里
短文

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

Answer 1

你指的是 css cursor 属性.

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

对于这种特殊情况，将您的文本包裹在 span 中，您将实现您所追求的目标：

<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/ 停止传播是停止事件的一种方式 'bubbling up'。跨度位于 div 内，因此，从技术上讲，如果您的跨度已被单击 - 您的 div 也已被单击。你想在 span click 事件处理程序中停止它，因此我在 span click 处理程序上调用了 stopPropagation()。

另请注意，我 select 基于 div 和 span，这将 select 所有 div 和所有跨度。您需要针对您的代码优化它。

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

Separating "click on text" and "click on background" events within same div in jQuery

html

css

jquery

events

event-handling