javascript - 使用 querySelectorAll 的 chrome 和 iPad 问题

Question

我有以下代码:

var showonlyswitch = document.querySelectorAll('#showonlyswitch > optgroup > option');
for (var y = 0; y<showonlyswitch.length; y++) {
     showonlyswitch[y].addEventListener('click', showonlyproducts);
}

在 firefox 中工作，但不在 chrome 中工作，也不在 iOS safari 中工作。

据我所知(“caniuse”告诉我)，两种浏览器都应该支持 querySelectorAll 和 addEventListener。 (iOS safari v.8.1 和 chrome v.39.0.2171.95(64 位))

我调用的函数非常简单:

function showonlyproducts() {

    var searchvalue = document.getElementById('showonlyswitch').value;
    if (searchvalue == 1) {
        window.location.href = 'pricing?close=1';
    }
}

起初我认为 window.location.href 会导致一些问题，但我尝试 console.log 一些乱码，它在 firefox 中有效，但在 chrome 中无效。

我也试过改

var showonlyswitch = document.querySelectorAll('#showonlyswitch > optgroup > option');

到

var showonlyswitch = document.querySelectorAll('#showonlyswitch > option');

但这(显然)在任何浏览器中都不起作用。

选择在某些选项组中是分开的，并且该功能应该在单击选项时触发，因为更改事件不足以满足这种情况，因为有可能在没有触发更改事件的情况下选择了解决方案(没有更改).

正如我所说，代码在 firefox 中运行得非常好，所以不应该有任何拼写错误或其他东西(通常......)，在 chrome 的控制台中没有错误。

这里有任何已知问题吗？

Answer 1

将点击事件绑定(bind)到 option 元素是不可靠的。而是使用 onchange 事件:

var showonlyswitch = document.querySelector('#showonlyswitch');
showonlyswitch.addEventListener('change', showonlyproducts);

关于这部分

the change event isn't sufficient for the situation because it is possible that a solution is chosen without the change event being triggered

尝试在 #showonlyswitch 选择元素本身而不是 option 元素上绑定(bind)点击事件。