将 javascript 属性事件转发到不同的处理程序/类型答案

【问题标题】：Forwarding javascript attribute events to different handler/type将 javascript 属性事件转发到不同的处理程序/类型
【发布时间】：2009-09-16 12:49:20
【问题描述】：

我目前正在尝试为触摸屏计算机设置网页，并且注意到（用我的胖手指）onclick 事件真的很难触发，因为我手指的表面积通常会导致光标在我“点击”时移动。

我想使用的解决方案是将 onmousedown 事件转发到 onclick。我怎样才能做到这一点？

最好的答案是：

<input type="radio" onmousedown="this.onclick()"/>

（当然是工作状态）

编辑：我的具体示例是用于单选按钮 - 当检查一个人时，其他人未被选中;当浏览器免费提供给我时，我不想在自定义事件中复制此行为。

注意：经过编辑并收到反馈后，我想我可能走错了路……也许不是单选按钮上的“单击”功能实际进行了选择：欢迎提出新建议……

【问题讨论】：

this.click(); ...应该可以解决问题。
"最好的答案是这样的：..." 为什么？
为什么？已编辑；单选按钮在点击时具有给定的浏览器行为。我不想太具体，因为我认为它适用于其他表单控件

标签： javascript html forms touchscreen

【解决方案1】：

好的，在您进行编辑后，它变得更加清晰 - 您要做的是模拟用户在触发 mousedown 事件时单击控件。

两种选择：

您可以触发 DOM 事件 - this tutorial on DOM events 讨论了这一点（请参阅手动触发事件部分）； Firing Javascript Events 涵盖了类似的领域。
设置onmouseout="this.checked = true;"，即单击单选按钮“检查”/选择单选按钮。

【讨论】：

来自“关于 DOM 事件的本教程”：以下代码运行良好（FF 3.5.1）： var fireOnThis = document.getElementById('someID'); var evObj = document.createEvent('MouseEvents'); evObj.initEvent('点击', true, true ); fireOnThis.dispatchEvent(evObj);但有一些一致性问题。 "this.checked = true" 似乎每次都有效...
选中 = 真。我不敢相信我从来没有想过单选按钮不会切换（如复选框）。但是，我确实想稍后将相同的功能应用于复选框...

【解决方案2】：

为什么不直接处理mousedown 事件？

【讨论】：

我猜在点击处理程序中已经实现了代码/逻辑，他也希望在鼠标按下时发生。换句话说，有一个实现和多个触发它的事件。
在这种情况下，他可以将该逻辑抽象为一个单独的函数，click 和 mousedown 处理程序都会调用该函数。
我已经澄清了这个问题......因为单选按钮上的点击功能是由浏览器提供的......也许不是点击？
如其他答案所述，只需将单选按钮的选中属性设置为 true 即可。

【解决方案3】：

我知道你没有在问题中提到它，但如果你碰巧使用 jQuery，那真的很容易：

$().live('mousedown', function() { this.click(); });

【讨论】：

很好的解决方案，为所有鼠标按下事件一劳永逸地修复它。 Wrt jQuery，我相信同样的事情也可以在许多其他框架中实现
哦，我积分不够，不过回调里面的函数应该是$(this).click();
我认为 this.click() 在纯 JavaScript 中工作。如果没有，那么是的，将对象包装在 jQuery 中就可以了。
在YUI3中，同样是YUI().Event.simulate(this, 'click')。但是，正如我在问题中的注释编辑中添加的那样，也许我正在尝试错误的事情......

【解决方案4】：

也许这对你有用

document.getElementById("yourinput").onmousedown = function() {
   this.click();
}

此外，您可以将输入按钮/字段的样式设置得稍大一点，以便通过指针更好地访问。

【讨论】：

【解决方案5】：

最好有一个函数来处理这两个事件，例如

var function = foo(e) {
   ...
};

<input onclick="foo();" onmousedown="foo();"/>

最好还是使用不显眼的 JavaScript，例如（如果您使用的是 YUI）：

<input id="input-el"/>

var function = foo(e) {
   ...
};

var Event = YAHOO.util.Event;

Event.on('input-el', 'click', foo);
Event.on('input-el', 'mousedown', foo);

【讨论】：