zoukankan      html  css  js  c++  java
  • 层中层事件问题

    今天遇到的问题是这样的:
     两个层,一个外层,一个内层,两个层都有onclick事件,点击外层,打开google页面,点击内层,打开baidu页面,我是这样做的
    <div onclick="window.open('http://www.google.cn')" style="250px;background-color:yellow"> 
     <p>google.cn</p> 
     <div onclick="window.open('http://www.baidu.com')" style="200px;background-color:orange"> 
     <p>baidu.com</p> 
     </div> 
     <p>google.cn</p> 
    </div>  
    当点击外层的时候,打开google,这里正确的;当点击内层时,出现了即打开baidu,又打开了google,这个效果不是我要的。经过向高人请教,他告诉我一种叫“阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)”可以解决这个问题,我在网上找了相关资料,终于解决了。代码如下:
    <script type="text/javascript"> 
    function doSomething (obj,evt) { 
     window.open(obj);
     var e=(evt)?evt:window.event; 
     if (window.event) { 
     e.cancelBubble=true; 
     } else { 
     e.stopPropagation(); 
     } 

    </script> 
    <div onclick="window.open('广州达内http://www.gztarena.com/');" style="250px;background-color:cyan;"> 
     <p>google.cn</p> 
     <div onclick="doSomething('http://www.baidu.com',event);" style="200px;background-color:lightblue;"> 
     <p>baidu.com</p> 
     </div> 
     <p>google.cn</p> 
    </div>  

  • 相关阅读:
    Vue内敛模板
    vue自定义组件添加原生事件监听
    vue 组件开发 props 验证
    Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
    jQuery中outerWidth()方法
    CSS3-transition
    行内元素(例如)设置float之后才能用width调整宽度
    leetcode LRU Cache python
    opcache effect
    leetcode Same Tree python
  • 原文地址:https://www.cnblogs.com/javaitpx/p/2767534.html
Copyright © 2011-2022 走看看