带有 querySelectorAll 的 chrome 和 iPad 问题答案

【问题标题】：Issue with chrome and iPad with querySelectorAll带有 querySelectorAll 的 chrome 和 iPad 问题
【发布时间】：2015-01-04 06:52:46
【问题描述】：

我有以下代码：

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');

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

选择在某些 optgroup 中是分开的，并且该功能应在单击选项时触发，因为更改事件对于这种情况是不够的，因为可能选择了解决方案而没有触发更改事件（没有更改)。

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

这里有什么让您想到的已知问题吗？

【问题讨论】：

标签： javascript ios google-chrome

【解决方案1】：

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

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

至于这部分

change 事件对于这种情况是不够的，因为有可能在没有触发 change 事件的情况下选择了解决方案

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

【讨论】：