这是一个 JSFiddle我所看到的行为,与 Chrome 和 FF 中的中键点击和 click 事件有关。
方法 1:将 click 处理程序直接绑定(bind)到 a 元素,中间单击将在 Chrome 中触发处理程序,但在FF.
$('div a').on('click', function(ev) {
// middle click triggers this handler
});
方法 2:将委托(delegate)的 click 处理程序绑定(bind)到包含一个或多个 a 的 div。在 Chrome 或 FF 中单击鼠标中键不会触发此处理程序。
$('div').on('click', 'a', function(ev) {
// middle click doesn't trigger this handler
});
如果 div 开始时为空,而 a 元素稍后通过 AJAX 调用或作为某些用户输入的结果填充,则此方法非常有值(value)。
使用 mouseup 而不是 click 会导致方法 1 和 2 在两种浏览器中都有效。
// Approach 1 w/ mouseup
$('div a').on('mouseup', function(ev) {
// middle click **does** trigger this handler in Chrome and FF
});
// Approach 2 w/ mouseup
$('div').on('mouseup', 'a', function(ev) {
// middle click **does** trigger this handler in Chrome and FF
});
这是 JSFiddle使用 mouseup。
这很有趣,在某些情况下可能会有用,因为 mouseup 几乎是 click。但是 mouseup 不是 click,我是在追求 click 的行为。我不想创建一个 hacky mousedown;设置超时; mouseup 模拟 click。
我很确定答案是“不”,但是是否有一种跨浏览器的方法可以使中间点击触发 click 处理程序?如果不是,原因是什么?
最佳答案
点击事件通常是针对鼠标左键触发的,但是,根据浏览器的不同,点击事件可能会也可能不会针对鼠标右键和/或中键触发。
在 Internet Explorer 和 Firefox 中,不会为右侧或中间按钮触发点击事件。
因此,我们不能可靠地将点击事件用于中间按钮或右键的事件处理程序。
相反,为了区分鼠标按钮,我们必须使用 mousedown 和 mouseup 事件,因为大多数浏览器都会为任何鼠标按钮触发 mousedown 和 mouseup 事件。
在 Firefox 和 Chrome 中,event.which 应该包含一个数字,指示按下了哪个鼠标按钮(1 是左边,2 是中间,3 是右边)。
另一方面,在 Internet Explorer 中,event.button 表示单击了哪个鼠标按钮(1 为左,4 为中,2 为右);
event.button 应该也适用于 Firefox 和其他浏览器,但数字可能略有不同(0 为左,1 为中,2 为右)。
所以为了把它们放在一起,我们通常会做这样的事情:
document.onmousedown = function(e) {
var evt = e==null ? event : e;
if (evt.which) { // if e.which, use 2 for middle button
if (evt.which === 2) {
// middle button clicked
}
} else if (evt.button) { // and if e.button, use 4
if (evt.button === 4) {
// middle button clicked
}
}
}
由于 jQuery 规范化了 event.which,您应该只需要在 jQuery 事件处理程序中使用它,并且这样做:
$('div a').on('mousedown', function(e) {
if (e.which === 2) {
// middle button clicked
}
});
换句话说,您不能使用 onclick 事件,因此您可以同时使用 mousedown 和 mouseup 来模拟它。
您可以添加一个计时器来限制 mousedown 和 mouseup 事件之间允许的时间,甚至可以添加 mousemove 处理程序来限制 mousedown 和 mouseup 事件之间的移动,并使事件处理程序在鼠标指针移动时不触发超过十个像素等。可能性几乎是无穷无尽的,所以这应该不是问题。
$('#test').on({
mousedown: function(e) {
if (e.which === 2) {
$(this).data('down', true);
}
},
mouseup: function(e) {
if (e.which === 2 && $(this).data('down')) {
alert('middle button clicked');
$(this).data('down', false);
}
}
});
关于javascript - 为什么在某些情况下单击鼠标中键不会触发 'click'?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20154901/
类classAprivatedeffooputs:fooendpublicdefbarputs:barendprivatedefzimputs:zimendprotecteddefdibputs:dibendendA的实例a=A.new测试a.foorescueputs:faila.barrescueputs:faila.zimrescueputs:faila.dibrescueputs:faila.gazrescueputs:fail测试输出failbarfailfailfail.发送测试[:foo,:bar,:zim,:dib,:gaz].each{|m|a.send(m)resc
我正在尝试测试是否存在表单。我是Rails新手。我的new.html.erb_spec.rb文件的内容是:require'spec_helper'describe"messages/new.html.erb"doit"shouldrendertheform"dorender'/messages/new.html.erb'reponse.shouldhave_form_putting_to(@message)with_submit_buttonendendView本身,new.html.erb,有代码:当我运行rspec时,它失败了:1)messages/new.html.erbshou
我有一个模型:classItem项目有一个属性“商店”基于存储的值,我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式?如果方法中没有大的if-else语句,这是如何干净利落地完成的? 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.co
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗?当我运行compasswatch时,它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行?文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们?我自己编译的.sass文件编译成compiled/t
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
我主要使用Ruby来执行此操作,但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式,例如使用这个yaml文件,它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
为什么4.1%2返回0.0999999999999996?但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意,这不是与Ruby相关的问题,而是与所有编程语言相关的问题,因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返
我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他,以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时,出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer
在MRIRuby中我可以这样做:deftransferinternal_server=self.init_serverpid=forkdointernal_server.runend#Maketheserverprocessrunindependently.Process.detach(pid)internal_client=self.init_client#Dootherstuffwithconnectingtointernal_server...internal_client.post('somedata')ensure#KillserverProcess.kill('KILL',
这是在Ruby中设置默认值的常用方法:classQuietByDefaultdefinitialize(opts={})@verbose=opts[:verbose]endend这是一个容易落入的陷阱:classVerboseNoMatterWhatdefinitialize(opts={})@verbose=opts[:verbose]||trueendend正确的做法是:classVerboseByDefaultdefinitialize(opts={})@verbose=opts.include?(:verbose)?opts[:verbose]:trueendend编写Verb