mousedown事件在使用jquery .on选择的选项中 [英] mousedown event on options in select with jquery .on

问题描述

我正在阅读jQuery .on事件处理程序的文档，然后开始玩转它.

I was reading the documentation of the .on event handler of jQuery and I started playing around with it.

我有一个简单的< select>多个属性设置为true的元素. 但是，我希望用户能够选择多个项目而不必按ctrl或Shift键.

I have a simple <select> element with the multiple attribute set to true. However, I want the user to be able to select multiple items without having to press the ctrl or shift key(s)

根据.on文档，如果您指定选择器，它将自动将那些事件处理程序添加到与指定选择器匹配的，在该容器内部添加的所有新项目中.

According to the .on documentation, if you specify a selector it will automatically add those event handlers to any new items added inside that container that match the selector specified.

因此，就我而言，例如，我可以决定替换< option>列表框中可用的元素，但我仍然希望这些选项具有相同的功能，而不必重新绑定这些事件等.

So in my case, I could for example decide to replace the <option> elements available in the listbox, but I still want to have the same functionality for those options without having to rebind those events etc.

也许有人认为以下代码片段应该可以解决问题(至少，我做到了):

One might think that the following snippet should do the trick (atleast, I did):

$('#dropdownlist').on('mousedown', 'option', function(e){
    e.preventDefault();
    $(this).prop('selected', $(this).prop('selected') ? false : true);
    return false;
});

因此，当用户单击该列表框中的选项时，默认操作将被取消，并且取决于是否已选择该项目，它将反转该选择.

So when a users clicks on an option in that listbox, the default action will be cancelled and depending wether the item is already selected or not, it will invert that selection.

我创建了一个小提琴来演示这种行为:小提琴

I have created a small fiddle demonstrating this behaviour: fiddle

在那个小提琴中，第一个下拉列表的行为符合预期，但是在替换项目时功能会丢失.这仅适用于FF& Chrome.

In that fiddle, the first dropdownlist is behaving as expected, but the functionality is lost when replacing the items. This only works in FF & Chrome.

第二个下拉列表是我认为应该的样子(明智地处理事件)，但是除了在Chrome中似乎不起作用-.- 替换项目时将保留该功能，因为替换项目后，单击项目时控制台仍将日志记录为"2".

The second dropdownlist is how I thought it should've been (event handling wise), but that doesn't seem to work besides in Chrome -.- The functionality is kept when replacing items, because the console will still log '2' when clicking on an item after replacing them.

有人可以向我解释为什么会这样吗?难道我做错了什么? 请指出正确的方向！

Can someone explain me why this is happening? Am I doing something wrong? Please point me in the right direction!

谢谢！

〜德克

推荐答案

IE不尊重option标记本身的mousedown事件.您必须使用select标记的OnChange事件，这不是您(也不是我想要的).我试图做与您完全相同的事情，并且每次尝试都被阻止.我终于放弃了，并把它变成了一个复选框列表，因为我可以从您的尝试中得到与我相同的行为.

IE doesn't respect the mousedown event on the option tag itself. You've got to use the OnChange event of the select tag, which is not what you (nor I) want. I was trying to do the exact same thing as you and was stopped at every attempt. I finally gave up and made it a list of checkboxes because I can get the same behavior out of mine that you are trying to do here.

对于某些选项，您可以看到此问题，但我从未理解过按照您描述的方式工作.

You can see this question for some options, but I never did get it to work the way you are describing.

这篇关于mousedown事件在使用jquery .on选择的选项中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！