Web 技术研究所

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

鼠标事件之间的操作

  click这个单词是鼠标点击时的拟声词,大概就是“嘀嗒”的感觉。所以,必须有“嘀”(mousedown)和“嗒”(mouseup),而且“嘀嗒”必须作用在同一个元素上才能算是一个完整的“嘀嗒”事件。而且由于事件是独立的,那就存在跨事件操作事件列表的问题。
  之前在介绍事件监听列表的行为差异时就强调差异存在同一次事件中,如果是从“嘀”或“嗒”事件上阻止“嘀嗒”事件,那就超出了一次事件的范围。它们不存在实现的差异,至少目前最新版本的IE、Firefox、Chrome上它们的行为都相同。事件触发过程中,对当前事件列表之外的任何事件列表所执行的操作都会直接生效,即使这些事件是相同的操作触发的。于是我们可以这样阻止click。
<input type="button" value="正常" />
<input type="button" value="阻止" />
<script>
//绑定事件
addEventListener("mousedown",handle);
addEventListener("mouseup",handle);
addEventListener("click",handle);
//事件处理函数
function handle(e){
  if(!e.target.value)return;
  console.log(e.type+" <- "+e.target.value);
  if(e.target.value=="阻止")
    if(e.type=="mouseup") //mouseup时临时解除click的事件监听
      removeEventListener("click",handle),
      setTimeout(addEventListener.bind(window,"click",handle));
};
</script>

  这里的例子中在“嗒”中移除了“嘀嗒”监听,然后创建一个临时消息再给绑定回去。当然,在这个过程中绑定新事件也是可行的,但需要考虑另一个问题。“嘀嗒”事件需要“嘀”和“嗒”同时作用在一个对象上才可以触发。如果在“嗒”中绑定新的“嘀嗒”事件会如何呢?
<input type="button" value="test" />
<script>
//绑定事件
addEventListener("mousedown",handle);
addEventListener("mouseup",handle);
//事件处理函数
function handle(e){
  if(!e.target.value)return;
  console.log(e.type+" <- "+e.target.value);
  if(e.type=="click")removeEventListener("click",handle);
  if(e.type=="mouseup")addEventListener("click",handle);
};
</script>
  即使“嘀嗒”是在“嘀”和“嗒”触发之后才绑定的,也依然会根据之前的“嘀”和“嗒”是否触发在同一元素上来决定“嘀嗒”是否触发(注意这些事件必须是由用户操作产生的,不会考虑由dispatchEvent派送的事件)。因此,直接点击按钮可以正常触发“嘀嗒”事件,而鼠标先点击其它地方再拖动到按钮上松开则不会触发“嘀嗒”。

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