js 问题集锦 之 二

一、ie下ajax请求缓存问题

在默认情况下，IE会针对请求地址缓存Ajax请求的结果。换句话说，在缓存过期之前，针对相同地址发起的多个Ajax请求，只有第一次会真正发送到服务端。某些情况下，我们需要对同个地址请求实时数据 ，这就需要解决缓存问题。

一般的ajax请求：

  $(function () {
                    window.setInterval(function () {
                        $.ajax({
                           url:'url',
                           success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                           }
                       });
                   }, 5000);
  });

解决方法一：通过URL地址添加后缀

 $(function () {
                    window.setInterval(function () {
                        $.ajax({
                            url:'url?'+ new Date().toTimeString() ,
                            success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                           }
                       });
                   }, 5000);
  });

解决方法二： jquery中使用$.ajaxSetup来设置

 $(function () {
                    $.ajaxSetup({ cache: false }); 
                    window.setInterval(function () {
                        $.ajax({
                           url:'url',
                           success: function (result) {
                               $("ul").append("<li>" + result + "</li>");
                           }
                       });
                   }, 5000);
  });

 

 

二、jQuery  $.trigger()方法

之前实现功能的过程中，有时候会需要触发某些事件来实现某下操作，但是触发这些事件的触发条件没有满足，只能把事件中的操作提出来到一个新的函数中，效果非常不理想。

这种现象一直持续到发现 $.trigger()方法。有时候真的应该抽空多翻翻手册，总会有意想不到的惊喜。

trigger() 方法触发被选元素的指定事件类型。

$(selector).trigger(event,[param1,param2,...])

参数	描述
event	必需。规定指定元素要触发的事件。 可以使自定义事件（使用 bind() 函数来附加），或者任何标准事件。
[param1,param2,...]	可选。传递到事件处理程序的额外参数。 额外的参数对自定义事件特别有用。

 

 

 三、浏览器相关

1、各浏览器键值差异 （摘自）

<p id="p1">Test mousedown</p>
<p id="p2">Test mouseup</p>
<p id="p3">Test click</p>
<p id="p4">Test dbclick</p>
 
<script type="text/javascript">
    function $(id){return document.getElementById(id)}
     
    var p1 = $('p1'), p2 = $('p2'), p3 = $('p3'), p4 = $('p4');
    p1.onmousedown = function(e){
        e = window.event || e;
        alert(e.button);
    }
    p2.onmouseup = function(e){
        e = window.event || e;
        alert(e.button);
    }
    p3.onclick = function(e){
        e = window.event || e;
        alert(e.button);
    }
    p4.ondbclick = function(e){
        e = window.event || e;
        alert(e.button);
    }       
</script>

鼠标左键测试结果

	IE6/7/8	IE9	Firefox4	Chrome12	Safari5	Opera10
mousedown	1	1	0	0	0	0
mouseup	1	1	0	0	0	0
click	0	0	0	0	0	0
dbclick	无响应	无响应	无响应	无响应	无响应	弹出菜单

 

IE6/7/8/9中，mousedown/mouseup 事件中获取左键的值为1，click事件中获取的却是0。
其它浏览器，mousedown/mouseup/click 事件中获取左键值均为0。完全遵循标准。
所有浏览器，dbclick事件中均无法获取

 

鼠标中键测试结果

	IE6/7	IE8/9	Firefox4	Chrome12	Safari5	Opera11
mousedown	4	4	1	1	1	出现方向图标
mouseup	4	4	1	1	1	出现方向图标
click	无响应	0	无响应	1	1	出现方向图标
dbclick	无响应	无响应	无响应	无响应	无响应	出现方向图标

 

IE6/7/8/9中，mousedown/mouseup 事件中获取中键的值为4。
IE6/7中，click事件无法获取中键的值。IE8/9则可以，但值为0。
Firefox4/Chrome12/Safari5中，mousedown/mouseup 事件中获取中键值为1。
Chrome12/Safar5中，click事件也能获取中键值，亦为1。
Opera11中无法获取中键值。

鼠标右键测试结果

	IE6/7/8/9	Firefox4	Chrome12	Safari5	Opera11
mousedown	2	2	2	右键菜单，2	先2，再弹右键菜单
mouseup	先2，再弹右键菜单	先2，再弹右键菜单	先2，再弹右键菜单	右键菜单，2	先2，再弹右键菜单
click	弹右键菜单	弹右键菜单	弹右键菜单	弹右键菜单	弹右键菜单
dbclick	弹右键菜单	弹右键菜单	弹右键菜单	弹右键菜单	弹右键菜单

 

所有浏览器，mousedown/mouseup事件中均能获取右键值，且都为2。但某些浏览器会有默认右键菜单行为。
所有浏览器，click/dbclick事件中均不能获取到右键值。

 

从以上测试可看到，判断鼠标按下了哪个键 ，应该选择合适的事件 。这里应选mousedown/mouseup。Opera10中仍然无法获取到中键的值，因为Opera压根不触发中键的事件(mousedown,mouseup,click,dbclick)。

 

以下代码将IE6/7/8的值转换成符合W3C标准的

var ie678 = !-[1,];
function getButton(e){
    var code = e.button;
    var ie678Map = {
        1 : 0,
        4 : 1,
        2 : 2
    }
    if(ie678){
        return ie678Map[code];
    }
    return code;
}