1、关于IE去掉A标签的虚线框：
|
a {
blr:expression(this.onFocus=this.blur());/* IE Opera */ outline:none;/* FF Opera */ } a:focus { -moz-outline-style:none; } |
全局控制 CSS实现
|
a {
blr:expression(this.onFocus=this.close()); /* 只支持IE，过多使用效率低 */ } a { blr:expression(this.onFocus=this.blur()); /* 只支持IE，过多使用效率低 */ } a:focus { -moz-outline-style:none; /* IE不支持 */ } |
在 Firefox 里可以用 -moz-outline:none; 或者 outline:none; 来将其去掉。所以我们可以这样写：
|
a:focus {
outline:none; -moz-outline:none; } |
顺便提一下，如果你用过 Safari 和 Chrome 可能会发现，当输入框得到焦点时边框会出现阴影效果。
如果想去掉阴影效果也可以用 outline 属性。
|
input,textarea {
outline:none; } |
言归正传，刚刚说的是 Firefox ，现在说说 IE。首先比较遗憾，还没有找到通过 CSS 去掉 IE 链接虚线框比较好的解决办法。所以只能用一个替代的办法，就是 a 标签的 hidefocus 属性(这个属性是 IE 独有的)。
|
<a
href=
"#" hidefocus=
"true"
>链接
</a>
|
2、区分mousedown和click：
大家都知道，鼠标点击的整个事件流程是：mousedown->mouseup->click，拖放的整个事件流程是：mousedown->mousemove->mouseup->click。我在做这个小项目的时候，碰到这么个问题，在触发mousedown事件的时候连带触发了 click 事件，这个问题我后来的解决方法是分别在 mousedown 和 mouseup 的时候记录鼠标的位置，如果鼠标位置没变化，那么就说明是 click 事件，如果鼠标位置有变化，那么就不触发 click 事件。
由这个问题引发了一个比较奇怪的问题，就是在 chrome 浏览器下，dom 元素的 title 属性会导致触发 mousedown 事件的同时连带触发 mousemove 事件，
如下例子：
|
<body>
<div id= "test" style= "width: 100px; height: 100px; border: 1px solid black" title= "erer" >asdasd </div> <script type= "text/javascript" > var $ = function (id) { return typeof id === 'string' ? document.getElementById(id) : id; } $( 'test').onmousedown = function () { console.log( 'this is mousedown event'); }; $( 'test').onmousemove = function () { console.log( 'this is mousemove event'); } </script> </body> |
我们可以看到 id 为 test 的div 中有个属性 title，关于 title 属性有个特性，当你鼠标按下的时候，提示文字会隐藏，鼠标松开的时候则显示。
在 chrome 下运行这个例子，当鼠标在div中按下且不松开，我们会在控制台看到如下输出：
那么当我们松开鼠标的瞬间控制台输出如下：
可以看到，松开鼠标会输出 "this is mousemove event"，相当于触发了 mousemove 事件，接下来就比较奇怪了，在提示信息 title 出现的时候，控制台会接着输出"this is mousemove event"即 mousemove 事件又触发了一次，如图：
具体的原因找了很多资料没有找到。
我这里避免的方法一个是避免使用 title 属性，另一个是事件动态绑定，也能解决问题，但是不知道根本原因，总感觉不爽，等以后知道原因了再补上来。。。。
4751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
