嵌套div的onClick事件问题
嵌套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事件问题的更多相关文章
- div的onclick事件怎么失效了?
1 前言 div是用拼接复制到另一个个div上,div的onclick事件中方法名为close,导致onclick=“close()” 触发不了,然后换了名称就可以了 2 代码 <!DOCTYP ...
- ie7中ul不能嵌套div和li平级
我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow"> ...
- 【转】ASP.NET的OnClientClick与OnClick事件【解决了“识别用户在对话框里面选yes或no的问题”】
OnClientClick是客户端事件方法.一般采用JavaScript来进行处理.也就是直接在IE端运行.一点击就运行. OnClick事件是服务器端事件处理方法,在服务器端,也就是IIS中运行.点 ...
- JS里的onclick事件
可以通过以下代码了解JS里的onclick事件: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml&quo ...
- JS监听div的resize事件
原文地址:http://zhangyiheng.com/blog/articles/div_resize.html 需求 开发过程中经常遇到的一个问题就是如何监听一个div的size变化. 比如我用c ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- onclick 事件
onclick 事件 Event 对象 定义和用法 onclick 事件会在对象被点击时发生. 请注意, onclick 与 onmousedown 不同.单击事件是在同一元素上发生了鼠标按下事件之后 ...
- js 中onclick 事件 点击后指向自己的对象,查找或者添加属性 用关键字this 传入参数 (可以改变原标签css)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 【winform】基于UserControl实现webBrower组件时html页面元素加载及onclick事件监听实现
[背景]基于System.Windows.Forms.UserControl实现的webBrower组件在html内使用window.external调用winform事件失败. [解决思路]借助wi ...
随机推荐
- JavaScript 实现:输出斐波那契数列
问渠那得清如许,为有源头活水来. 想要保持自己的技术活力,最有效的手段就是通过不断地输入来提供足够的养分.我们也不必刻意追求高深的或者新鲜的知识点,通过对一个基础问题的全方位多维度解析,同样也会收获不 ...
- MySQL 架构|给你一个“上帝视角”
"我平时的工作就是 CRUD (增删改查)呀!我怎么提升自己的技术?"."平时开发我都是用开源的 MyBatis.Hibernate,连原生的 sql 我都没写过几行&q ...
- 『心善渊』Selenium3.0基础 — 7、XPath轴定位详解
目录 1.XPath轴定位介绍 2.位置路径表达式概念 3.步的路径表达式范例 4.练习 使用XPath轴方式,可根据文档中元素的相对位置,来进行元素的定位.例如:先找到一个相对好定位的元素,在根据与 ...
- Go语言中底层数组和切片的关系以及数组扩容规则
Go语言中底层数组和切片的关系以及数组扩容规则 demo package main import ( "fmt" ) func main() { // 声明一个底层数组,长度为10 ...
- 我成了 GitHub Star
能够成为官方认证的 GitHub Star(明星)我和你们一样十分震惊! 可能很多读者不知道这个 GitHub Star 是什么,我先来介绍下它: GitHub Stars(明星)是 GitHub 官 ...
- ceph-csi源码分析(7)-rbd driver-IdentityServer分析
更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(7)-rbd driver-IdentityServer分析 当 ...
- excel VBA一个fuction同时执行多个正则表达式,实现方法
代码: Function zhengze3(ze1 As String, ze2 As String, Rng1 As Range, Rng2 As Range) Set regx1 = Cre ...
- 春风十里不如你,全新Windows UI 3(WinUI 3) 的第一个实现Project Reunion 0.5
什么是WinUI Windows UI库 (WinUI) 是适用于 Windows 桌面应用程序和 UWP 应用程序的本机用户体验 (UX) 框架. WinUI is a user interface ...
- Web 前端开发规范手册
一.规范目的 Web 前端开发规范手册 1.1 概述 ......................................................................... ...
- CentOS-yum安装Redis(单点)
源文件安装(推荐安装) 在CentOS系统中,首先安装EPEL仓库,然后更新yum源: $ yum install epel-release -y $ yum update -y 然后安装Redis数 ...