jQuery event.which监视是哪个键触发键盘和鼠标事件

在 jQuery 的事件处理体系中,event.which针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键。event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。

语法

在事件处理函数中,通过 event对象来获取event.which的值。

案例

考虑一个简单的页面,上面有一个文本输入框,我们希望根据用户按下的键来执行不同的操作。

  <input id="whichkey"  placeholder="按下键盘或鼠标按钮">
  <div id="log"></div>
  <script>$('#whichkey').on('keydown mousedown',function(e){
    $('#log').html(e.type + ': ' +  e.which );
  });  
  </script>

运行代码

注意event.which也可以监视鼠标的按键(mousedown 和 mouseup的event),左键报告1,中间键报告2,右键报告3。键盘码请参考《键盘码(KeyCode)对照表

注意事项

1. 键码值的多样性:不同的键盘和设备可能会有略微不同的键码值,需要进行充分的测试以确保在各种情况下的准确性。

2. 浏览器兼容性:虽然 jQuery 通常会处理一些兼容性问题,但某些古老或特殊的浏览器可能对键码值的处理存在差异。

3. 组合键的处理:当涉及到组合键(如 Ctrl + 键)时,需要特别注意 event.which的值可能并不完全反映组合键的情况。

4. 移动端的差异:在移动设备上,触摸事件的键码值可能与传统键盘有所不同,要根据实际情况进行调整和处理。

5. 特殊字符和功能键:对于一些特殊字符(如方向键)和功能键(如 F1 - F12),要正确理解和处理它们的键码值。

6. 事件冒泡的影响:在复杂的页面结构中,要注意事件冒泡可能导致event.which在不期望的元素上被获取。

7. 动态添加元素的键事件:确保在动态添加元素后,键事件的绑定和event.which的处理是正确的。

8. 性能考虑:频繁地依赖event.which进行复杂的判断和处理可能会对性能产生一定影响,要在必要时进行优化。

9. 代码可读性和维护性:在使用event.which进行复杂逻辑时,要保持代码的清晰和易于理解,以便后续的维护和扩展。

10. 与其他输入方式的兼容性:如手写输入、语音输入等,可能需要额外考虑如何处理这些输入方式与event.which的关系。


总之,event.which是一个非常实用的属性,通过它我们可以精确地了解用户的按键或按钮操作。但在使用过程中,要充分考虑各种因素,以确保程序的正确性和稳定性。结合具体的应用场景和需求,合理地运用event.which可以实现丰富而高效的用户交互体验。