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

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

select在某些optgroup中是分开的，并且函数应该在点击某个选项时触发，因为更改事件不足以满足这种情况，因为可能选择的解决方案没有触发更改事件（无更改））。

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

这里有什么已知问题可以解决吗？

Answer 1

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

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

至于这部分

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

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

使用querySelectorAll的chrome和iPad问题

1 个答案: