DOM元素点击失效问题
来源:互联网 发布:dota2饰品交易知乎 编辑:程序博客网 时间:2024/06/01 10:32
在为DOM添加事件处理函数的时候,出现了一个DOM元素无法点击的问题,
虽然class=”share”的元素的img类型的子孙元素中的第一个元素已经设置了鼠标点击的事件处理函数,但是这个事件处理函数并不能被触发,也就是点击这个图片的时候没有反应。
第一个原因:由于需要注册事件处理函数的img元素是放在header标签里面的,但是header标签如果不进行手动设置height,那么header标签的高度为0px,所以会导致点击不到header中的元素。
<body> <div class="main"> <div class="home-page"> <header> <div class="share"> <img src="assets/img/sharethis_icon.png"> <img src="assets/img/facebook_icon.png"> <img src="assets/img/friendcircle_icon.png"> <img src="assets/img/twitter_icon.png"> <img src="assets/img/yahoo_icon.png"> </div> ........</body>
第二个原因:由于我的页面中间有一个很大的标题,而为了让这个标题居中,我采用了如下CSS样式使其居中:
h1 { text-align: center; margin: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-top: 15%;}
这样的居中方式导致了这个h1标签占据了header原本的位置,对header元素进行了覆盖,所以点击header中的img元素的时候,实际上是点击了h1元素,解决办法可以将padding-top改为margin-top即可,这样就可以点击到需要的img元素了。
第二个问题我使用了一个点击页面,可以返回自己点击的元素的标签名的javaScript函数来进行检测的,这个函数比较实用。
function show_element(e){ if(!e){ var e = window.event; } //获取事件点击元素 var targ = e.target; //获取元素名称 var tname = targ.tagName; alert(tname); }
0 0
- DOM元素点击失效问题
- jquery中的on方法失效问题(ipone 动态生成的元素无法点击 )
- 关于jquery无法为动态生成的dom元素添加点击事件的问题
- 解决DOM元素循环渲染后出现点击事件多次执行问题
- 动态点击修改当前dom元素背景
- android listview item点击失效问题
- Android ListView的Item点击失效问题
- Android ListView item点击失效问题
- listview和gridView混用,点击失效问题
- 解决ListVeiw点击事件失效问题
- 解决ExpandableListView 点击效果失效问题
- 在ios上面点击失效的问题
- jquery动态添加元素,事件失效问题
- JQuery给动态生成的DOM元素绑定点击事件
- Vue同一个dom元素如何绑定多个点击事件?
- 动态添加元素后 js点击 DOM查找不到
- jq 加入的dom点击事件不能点击的问题
- viewpager中点击item问题,viewpager中onclick失效问题
- some characters cannot be mapped using"ISO-8859-1'/ GBK MYeclipse
- 基本数据类型转换以及时间格式化
- 【Android】SQLite实例(多线程下安全访问数据库)
- DOM属性及操作
- 跟我一起写 Makefile(五)
- DOM元素点击失效问题
- 写出高质量代码的10个Tips
- think in java (com.bruceeckel.simpletest)配置
- 树状数组(LA4329,UVaLive4329,Ping pong)
- No symbol "xxx" in current context
- 实战Nginx与PHP(FastCGI)的安装、配置与优化
- linux cache总结
- 链接服务器 "(null)" 的 OLE DB 访问接口 "SQLNCLI11" 指示该对象没有列,或当前用户没有访问该对象的权限。
- 30+有用的CSS代码片段