隐藏属性对元素的click事件的影响

在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。一个一个看。

  1. { display: none; /* 不占据空间,无法点击 */ }
  2. /********************************************************************************/
  3. { visibility: hidden; /* 占据空间,无法点击 */ }
  4. /********************************************************************************/
  5. { position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
  6. /********************************************************************************/
  7. { position: relative; top: -999em; /* 占据空间,无法点击 */ }
  8. /********************************************************************************/
  9. { position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }
  10. /********************************************************************************/
  11. { height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
  12. /********************************************************************************/
  13. { opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
  14. /********************************************************************************/
  15. { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }
  16. /********************************************************************************/
  17. {
  18. zoom: 0.001;
  19. -moz-transform: scale(0);
  20. -webkit-transform: scale(0);
  21. -o-transform: scale(0);
  22. transform: scale(0);
  23. /* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
  24. }
  25. /********************************************************************************/
  26. {
  27. position: absolute;
  28. zoom: 0.001;
  29. -moz-transform: scale(0);
  30. -webkit-transform: scale(0);
  31. -o-transform: scale(0);
  32. transform: scale(0);
  33. /* 不占据空间,无法点击 */
  34. }

来自为知笔记(Wiz)

时间: 2024-08-04 21:36:31

隐藏属性对元素的click事件的影响的相关文章

jquery为链接a元素注册click事件并避免跳转现象

jquery为链接a元素注册click事件并避免跳转现象:在实际应用中,可能需要将链接a作为一个普通的按钮使用,但是由于点击按钮会导致跳转动作,下面就通过代码实例介绍一下如何实现点击功能,并且不会出现跳转现象,代码如下: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.

动态生成DOM元素绑定click事件无效问题

在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了

给DOM元素绑定click事件也有学问

最简单的莫过于使用click方法:名仕娱乐城 <input id="btn" type="button" value="BUTTON" onclick="alert(1)"/> <script> var btn = document.getElementById('btn'); btn.click(); </script> 所有浏览器都弹出了1.但是如果把input换成div呢? <d

js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br/><br/><div>搜索</div> 想要实现的结果: 1.input框获取焦点时value为“”,失去焦点时value为“默认值”:-----这个很好实现: 2.当在input框中输入要搜素的内容后,点击div搜索,要求控制台打印输出要搜素的内容(当然每个项目的

JQuery给元素绑定click事件多次执行的解决方法

原绑定方法: $(".subNavdiv").click(function () { ###### }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: $("#sdfsd").unbind("click").click(function(e){ ###### }); 在绑定新click方法前对元素所绑定的click方法解绑

jquery添加的html元素按钮为什么不执行类样式绑定的click事件

代码举例: 更多按钮: <input type="button" class="addMore" id="addMore${issue.id }" value="更多" /> 点击按钮添加一行文本框和“提交”按钮:(没有问题,可以正常添加) $(".addMore").click(function(){ var index = this.id.substring(7,this.id.length

blur和click事件冲突

一.问题描述文本框的blur事件和div元素的click事件出现冲突.在input的blur事件中,我们隐藏div元素.在div的click事件中,我们清除input的内容,并隐藏自身.当我们在input中输入内容后,点击div,希望触发div的click事件,清除input的内容,并隐藏自身.不料先触发了input的blur事件,隐藏了div元素,导致无法完成div的click事件.二.问题分析出现上述问题,让人不得不去探索事件执行顺序.A.在一个input文本框中绑定如下事件,测试执行顺序

jquery中对动态生成的标签不会响应click事件

Jquery中对ajax动态生成的html标签不会响应 $(selector).click(function.. 或者$(selector).bind('click',function.., 需要用.live. 我们这样绑定元素的click事件,以后jquery动态生成的元素,click事件也有效. $('.clickme').live('click', function() { alert("Live handler called."); });

在微信公众号开发(微站)过程中用Zepto/jquery的on/live绑定的click事件点击无效(不能执行)

问题描述 当使用委托给一个非button.a标签元素添加click事件时,如果事件是委托到 document 或 body 上,并且委托的元素是默认不可点击的(如 div, span 等),此时 click 事件会失效. 解决办法 解决办法有 4 种可供选择: ?将 click 事件直接绑定到目标?元素(??即 .target)上 将目标?元素换成 <a> 或者 button 等可点击的?元素 ?将 click 事件委托到?????非 document 或 body 的??父级元素上 ?给?目