Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

Range控件的Change事件触发差异

  Range控件算是一个比较新的东西,经常被用于一些固定范围值的调节上,通过鼠标拖动其滑块来修改它的值。但其定义并不太明确,浏览器在实现上还是有差异的。Chaneg事件的触发差异就是个问题。在Firefox上需要为其单独编写兼容代码。
  这是一个最基本的测试,只测试Change事件的触发
<input type="range" min="0" max="100" id="range" />
<script>
range.onchange=function(){
  console.log(range.value);
};
</script>

  IE和Chrome上,当滑块被拖动时,这个事件会一路触发过来,而Firefox上只有松开鼠标后才会触发一次。显然前者的用户体验更友好,所以我们要在Firefox上模拟Chrome和IE的行为。
<input type="range" min="0" max="100" id="range" />
<script>
(function(){
  var value=range.value; //记录当前值
  range.addEventListener("change",function(){
    if(value==range.value)return; //防止重复触发
    console.log(range.value); //TODO
    value=range.value; //记录当前值
  });
  //鼠标操作相关事件处理
  range.addEventListener("mousedown",function(){
    document.addEventListener("mouseup",mouseup);
    range.addEventListener("mousemove",mousemove);
  });
  function mouseup(){
    //解除事件绑定
    document.removeEventListener("mouseup",mouseup);
    range.removeEventListener("mousemove",mousemove);
  };
  function mousemove(){
    //主动触发Change事件
    var e=document.createEvent("Event");
    e.initEvent("change",false,true);
    range.dispatchEvent(e);
  };
})();
</script>


  测试于:
    Chrome 32.0.1700.107 m
    Firefox 27.0.1
    IE 11.0.9600.16518
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^