html&js的一些杂记
sshong 发表于2013年7月10日 10:52:35 更新于2013年7月29日 15:54:32
1、事件侦听中reture false
原生事件侦听中reture false与event.preventDefault()等效,都是禁止默认动作生效。
另外,jQuery中的事件侦听也模拟了return false。

2、禁止选中
对于firefox与chrome可以将css属性user-select设置为none
#test{
   -moz-user-select: none; /*火狐*/
   -webkit-user-select: none;  /*webkit浏览器*/
   -ms-user-select: none;   /*IE10*/
   -khtml-user-select: none; /*早期浏览器*/
   user-select: none;
}

对于ie可以设置属性 unselectable='on'(off代表可以选中)
<div id='test' unselectable='on'>
    This is a div and can't select
</div>

另外,可以侦听selectstart,通过reture false或者preventDefault达到效果。

3、禁止鼠标事件(类似flash中的mouseEnable = false,鼠标穿透)
对于firefox和chrome可以使用css属性pointer-events设置为none
#test {
   pointer-events: none;
}
对于ie,暂时无解!

4、禁止拖拽(特别是图片)
对于chrome加入属性 draggable='false'。
对于firefox,侦听mousedown,返回false或者preventDefault达到效果。
对于ie,侦听mousemove,返回false或者preventDefault达到效果。
综合起来就是
var ele = document.getElementById('img');
ele.onmousedown = ele.onmousemove = function(evt) {
   //evt.preventDefault();
   return false;
}
<img id='img' draggable='false' src='xx'>

5、iphone上文字会自动变大变粗的情况
iphone有个有趣的特性,会在他认为文字不够清楚可读的时候自动将文字放大加粗以便清晰可读,要禁止这种自动调整,加css:
-webkit-text-size-adjust: none;

6、iphone上可点击UI在点击时会显示一个灰色的点击区域阴影
这是为了提示用户的点击响应,可以用css来禁止:
-webkit-tap-highlight-color: rgba(0,0,0,0);
这会把这个灰色的阴影设为透明不可见(并未消除)
标签:无分类:JS&Html5阅读:3027
评论
暂无评论
添加评论
您的大名,限长10汉字,20英文(*)
电子信箱(*)
您的网站
正文,限长500汉字,1000英文(*)
验证码(*) 单击刷新验证码
联系我
博客订阅