嵌套div的onClick事件问题
我在下面的代码中的外层div中加了onClick事件,这样当鼠标点击这个div的时候就会跳转了。
但是我在图片上加了一些其他效果,所以当鼠标点击中间的img时不能触发跳转事件。

<div class="box" onClick="window.open('interest/cloud.php');">

<div class="texts">

<div class="title">云</div>

</div>

<div class="images">

<img src="angel.gif" />

</div>

<div class="texts">

<div class="content">云</div>

<div class="author">云</div>

</div>

</div>

总之就是当鼠标点击除了图片以外的区域触发跳转事件,而点击图片的时候则执行我的其他事件。
------解决思路----------------------



<div class="box" onClick="window.open('interest/cloud.php');">

<div class="texts">

<div class="title">云</div>

</div>

<div class="images" onClick="event.cancelBubble = true">

<img src="angel.gif" />

</div>

<div class="texts">

<div class="content">云</div>

<div class="author">云</div>

</div>

</div>

****注意
onClick="event.cancelBubble = true", 这句代码要加在点击框的父级上

嵌套div的onClick事件问题的更多相关文章

  1. div的onclick事件怎么失效了?

    1 前言 div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了 2 代码 <!DOCTYP ...

  2. ie7中ul不能嵌套div和li平级

    我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow">              ...

  3. 【转】ASP.NET的OnClientClick与OnClick事件【解决了“识别用户在对话框里面选yes或no的问题”】

    OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点 ...

  4. JS里的onclick事件

    可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...

  5. JS监听div的resize事件

    原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...

  6. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  7. onclick 事件

    onclick 事件 Event 对象 定义和用法 onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后 ...

  8. js 中onclick 事件 点击后指向自己的对象,查找或者添加属性 用关键字this 传入参数 (可以改变原标签css)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现

    [背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...

随机推荐

  1. 重新整理 .net core 实践篇—————仓储层的具体实现[二十七]

    前言 简单整理一下仓储层. 正文 在共享层的基础建设类库中: /// <summary> /// 泛型仓储接口 /// </summary> /// <typeparam ...

  2. Java安全之Weblogic内存马

    Java安全之Weblogic内存马 0x00 前言 发现网上大部分大部分weblogic工具都是基于RMI绑定实例回显,但这种方式有个弊端,在Weblogic JNDI树里面能将打入的RMI后门查看 ...

  3. 20201123 实验三《python程序设计》实验报告

    20201123 2020-2021-2 <python程序设计>实验三报告 课程:<Python程序设计>班级:2011姓名:晏鹏捷学号:20201123实验教师:王志强实验 ...

  4. SpringAnimator弹簧联动效果的实现

    使用SpringAnimation实现弹簧联动 简介 弹簧效果动画SpringAnimation与甩动效果动画FlingAnimation使用上很类似,主要区别在于FlingAnimation是根据甩 ...

  5. centos7 system自定义服务

      1.介绍 centos中service命令与/etc/init.d的关系 service httpd start 其实是启动了存放在/etc/init.d目录下的脚本. 但是centos7的服务管 ...

  6. 4、oracle表操作

    4.1.dml操作: 1.查看当前用户下所有的表: select * from user_tables; 2.查看某表的大小: select sum(bytes)/(1024*1024) as &qu ...

  7. [HNOI2006]公路修建问题题解

    题目 题目描述 OI island是一个非常漂亮的岛屿,自开发以来,到这儿来旅游的人很多.然而,由于该岛屿刚刚开发不久,所以那里的交通情况还是很糟糕.所以,OIER Association组织成立了, ...

  8. Docker环境RabbitMq配置SSL

    RabbitMQ要对外提供服务,考虑到安全性,配置SSL进行访问,ssl端口5671,内部仍然使用5672进行访问,两者同时兼容. 安装环境 CentOS 7.5 Docker 1.13.1 Git ...

  9. WebService:WebService+Springboot常用注解

    首先推荐webservice文章不错的博主:https://www.iteye.com/blog/yufenfei-1685249 这位博主主要讲了WebService的CXF的jar包运用,很实用 ...

  10. 为什么socket是三次握手挥手却是四次

    为知笔记地址: https://794e611d.wiz03.com/wapp/pages/view/share/s/1VjC4t215AfJ2knVCX1yXcay1HkR1O0_L4CF2w2CR ...