如何使用 JavaScript 中的内联 onclick 属性停止事件传播？

有时，我们需要在嵌套的 HTML 元素上添加相同的事件。例如，我们有两个div，一个是父div，另一个是子div。现在，我们需要在父div和子div上添加onclick事件，并在用户点击父div和子div时执行不同的功能。在这种情况下，它将始终在父 div 和子 div 上执行事件。

让我们通过下面的示例了解如何在嵌套 HTML 元素上执行相同的事件。

示例

在下面的示例中，我们创建了两个 div。我们为外部 div 指定了“parent-div”类名称，为内部 div 指定了“child-div”类名称。

此外，我们还添加了 onclick 事件，在两个 div 元素上执行不同的功能。当用户点击内部div时，父div中也会触发点击事件。

立即学习“Java免费学习笔记（深入）”；

   


   
Adding the same events  to nested HTML elements  in JavaScript
   
Click on the below parent & child DIVs to see the result
   
 Parent DIV
      
 Child DIV 
   
   
 
   

我们需要使用事件来解决上述问题，比如点击子div，调用父div的click事件.stopPropogation()方法。

语法

用户可以按照下面的语法使用 stopPropgation() 方法来停止向父元素传播事件。

Event.stopPropogation(); 

示例

在下面的示例中，我们在 HTML

Removal.AI

AI移出图片背景工具

下载

标记内添加了一些文本，并在执行executeP() 函数的 onclick 事件中添加了一些文本。此外，我们在

标签内添加了一个 标签，并在执行executeSpan() 函数的span 标签上添加了“onclick”事件。

此外，我们还使用了 event.stoPropogation() 方法和 元素的 onclick 事件，以在用户单击 时停止在

标记上传播事件。

在输出中，用户可以观察到当他们单击元素的文本时，它只执行executeSpan()函数。

   
Adding the same events  to nested HTML elements and using the event.stopPropogation() method  in JavaScript 
 
   
 Hello users! How are you?  Child Span  
   
 
   

 

示例

在下面的示例中，我们使用 HTML 标记创建了三个嵌套元素的层次结构。我们在每个元素上添加了 onclick 事件。如果我们不使用event.stopPropogation()方法，它总是执行firstDivClick()函数。

为了解决这个问题，我们在调用它们时将事件作为函数的参数传递，并在函数内使用 stopPropogation() 方法。

用户可以观察到，当他们单击“菜单”文本时，它仅执行 kebabMenuClick() 函数。当用户单击第二个 div 时，它仅执行 secondaryDivClick() 函数。

   


   
Adding the same events  to nested HTML elements and using the event.stopPropogation() method  in JavaScript 
   

      

         
 Menu 
      
   
   
 
   

用户学会了对事件使用 event.stopPorpogation() 方法。基本上，它用于阻止事件传播到父元素。这样，当同一个事件触发父子元素时，我们就可以为所有子元素执行不同的函数。