是否有解决方法来触发IE中的option.click事件？ [英] Is there a workaround to trigger an option.click event in IE?

问题描述

我使用下拉列表允许用户对搜索结果进行排序。这些结果存在于表中，但并非所有可排序条件都由列表示。可以通过单击列标题或使用排序依据下拉列表对列进行排序。用户可以通过单击已排序的列标题来反转排序。我试图在下拉列表中复制此功能，但无法在IE7 / IE8中使用它。

I am using a dropdown to allow the user to sort search results. These results in a table but not all of the sortable criteria are represented by columns. The columns can be sorted by either clicking on the column header or using a 'Sort By' dropdown. The user can reverse the sort by clicking on the sorted columns header. I am trying to duplicate this functionality in the drop down but can't get it to work in IE7/IE8.

以下是在IE浏览器中均可使用的现有代码和Firefox。它会更改已排序的列，但不会更改排序方向。

The following is the existing code that works in both IE and Firefox. It changes the sorted column but not the sort direction.

$("#sortSelect").change(function() {
    //change sort
});

这是我试图将其更改为并且在Firefox中有效。它会更改已排序的列，如果已选择已排序的列，则会更改排序方向。

This is what I am trying to change it to and it works in Firefox. It changes the sorted column and if the sorted columns is already selected it will change the sort direction.

$("#sortSelect option").click(function() {
    //change sort
});

我希望有人知道触发option.click事件或知道好事的方法解决方法。

I was hoping someone would know of a way to trigger the option.click event or know of a good workaround.

推荐答案

重申TJ的内容克劳德在评论中说，这是你对用户界面所做的一个尴尬的改变。话虽这么说，可以区分单击选择元素并单击选项元素如果select没有多个属性集。在Internet Explorer中尝试以下代码：

To reiterate what T.J. Crowder said in the comments, this is an awkward change that you're making to a user interface. That being said, it's possible to distinguish between clicking on the select element and clicking on an option element if the select doesn't have the multiple attribute set. Try out the following code in Internet Explorer:

$(document).ready(function ()
{
  $("#sortSelect").click(function (event) {
    if (event.offsetY > this.offsetHeight)
      $(this.options[this.selectedIndex]).click();
  });
  $("#sortSelect option").click(function (event)
  {
    alert('clicked option '+this.parentNode.selectedIndex);
  });
});

它的工作原理是因为当您单击选项元素时，click事件将触发select元素。通过检测您是否在select元素的边界外单击，检查 event.offsetY> this.offsetHeight ，您可以使用jQuery触发当前所选选项元素的click事件。

It works because when you click on an option element, the click event fires on the select element. By detecting that you've clicked outside the bounds of the select element checking event.offsetY > this.offsetHeight, you can use jQuery to trigger the click event of the currently selected option element.

这篇关于是否有解决方法来触发IE中的option.click事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！