简体   繁体   English

是否有解决方法来触发IE中的option.click事件?

[英]Is there a workaround to trigger an option.click event in IE?

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. 我正在尝试在下拉菜单中复制此功能,但无法使其在IE7 / IE8中正常工作。

The following is the existing code that works in both IE and Firefox. 以下是在IE和Firefox中均可使用的现有代码。 It changes the sorted column but not the sort direction. 它会更改已排序的列,但不会更改排序方向。

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

This is what I am trying to change it to and it works in Firefox. 这就是我试图将其更改为它并且可以在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
});

I was hoping someone would know of a way to trigger the option.click event or know of a good workaround. 我希望有人会知道触发option.click事件的方法,或者知道一个好的解决方法。

To reiterate what TJ Crowder said in the comments, this is an awkward change that you're making to a user interface. 要重申TJ Crowder在评论中所说的,这是您对用户界面所做的尴尬更改。 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 . 话虽如此, 如果select没有设置multiple属性 ,则可以区分单击select元素和单击option元素。 Try out the following code in Internet Explorer: 在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);
  });
});

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. 通过检测到您单击了select元素的边界,并检查event.offsetY > this.offsetHeight ,可以使用jQuery触发当前选择的option元素的click事件。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM