最新公告
  • 欢迎您光临码农资源网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!加入我们
  • 如何使用 JavaScript 中的内联 onclick 属性停止事件传播?

    如何使用 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中也会触发点击事件。

    <html>
    <head>
       <style>
          .parent-div {
             width: 300px;
             height: 150px;
             margin: 50px;
             padding: 10px;
             background-color: lightblue;
          }
          .child-div {
             width: 100px;
             height: 70px;
             margin: 30px; 
             padding: 10px;
             background-color: lightgreen;
          }
       </style>
    </head>
    <body>
       <h3>Adding the same events <i> to nested HTML elements </i> in JavaScript</h3>
       <p>Click on the below parent & child DIVs to see the result</p>
       <div class = "parent-div" onclick = "executeParent()"> Parent DIV
          <div class = "child-div" onclick = "executeChild()"> Child DIV </div>
       </div>
       <div id="content"> </div>
       <script>
          let content = document.getElementById("content");
          function executeParent() {
             content.innerHTML += "Parent div clicked <br>";
          }
          function executeChild() {
             content.innerHTML += "Child div clicked <br>";
          }
       </script>
    </body>
    </html>
    

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

    语法

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

    Event.stopPropogation(); 
    

    示例

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

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

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

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

    标记上传播事件。

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

    <html>
    <body>
       <h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3> 
       <p style = "cursor: pointer;" onclick="executeP()"> Hello users! How are you? <span Onclick = "event.stopPropagation(); executeSpan();"> Child Span </span> </p>
       <div id = "content"> </div>
       <script>
          let content = document.getElementById("content");
          function executeP() {
             content.innerHTML += "Clicked on the p element. <br>";
          }
          function executeSpan() {
             content.innerHTML += "Clicked on the Span element! <br>";
          }
       </script>
    </body>
    </html> 
    

    示例

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

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

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

    <html>
    <head>
       <style>
          .card-1 {
             width: 300px;
             height: 200px;
             background-color: red;
             cursor: pointer;
          }
          .card-2 {
             width: 200px;
             height: 150px;
             background-color: blue;
             cursor: pointer;
          }
          .kebab-menu {
             font-size: 1.2rem;
             color: white;
             cursor: pointer;
          }
       </style>
    </head>
    <body>
       <h3>Adding the same events <i> to nested HTML elements and using the event.stopPropogation() method </i> in JavaScript </h3>
       <div class = "card-1" onclick = "firstDivClick(event)">
          <div class = "card-2" onclick = "secondDivClick(event)">
             <div class = "kebab-menu" onclick = "kebabMenuClick(event)"> Menu </div>
          </div>
       </div>
       <div id = "content"> </div>
       <script>
          let content = document.getElementById("content");
          function firstDivClick(event) {
             content.innerHTML += "first div clicked <br>";
          }
          function secondDivClick(event) {
             event.stopPropagation();
             content.innerHTML += "second div clicked <br>";
          }
          function kebabMenuClick(event) {
             event.stopPropagation();
             content.innerHTML += "kebab menu clicked <br>";
          }
       </script>
    </body>
    </html>
    

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

    想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
    本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
    如有侵权请发送邮件至1943759704@qq.com删除

    码农资源网 » 如何使用 JavaScript 中的内联 onclick 属性停止事件传播?
    • 5会员总数(位)
    • 22375资源总数(个)
    • 770本周发布(个)
    • 77 今日发布(个)
    • 176稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情