尝试实现指针事件：JavaScript中无

我有一个选择下拉列表，我正试图使用一个虚拟蒙版元素删除向下箭头。但是，当我单击该遮罩元素时，选择下拉列表不会触发

检查这个

如果我将

指针事件：none

指定给

.slct drpdwn

，则一切正常，但遗憾的是IE9不支持这一点。因此，我想使用JavaScript实现css

指针事件：无类似行为

下面是JavaScript代码，它没有做任何事情：

var select = document.querySelector('.slct-drpdwn');
select.onclick = function (e) {
    var e = e || window.event;
    console.log("in");
    if (!e.preventDefault) { //IE quirks
        e.returnValue = false;
        e.cancelBubble = true;
    }
    e.preventDefault();
    e.stopPropagation();
}

您可以在css中解决此问题，而无需js：

    .slct {
    position:relative;
    display:block;
    border:solid black 1px;
    float:left;
    overflow: hidden;
}
div select {
    z-index:1;
    width:125%;
    background: transparent;
    border:0;
}
.slct .slct-drpdwn {
    display:block;
    position:absolute;
    right:0;
    top:0;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index: -1;
}

如果不想使用
溢出：隐藏，请尝试此操作：

尝试使用jQuery：


IE9识别指针事件：无，但仅用于SVG元素。试试这个：

 <div class="slct">
            <select>
                <option>Foobar</option>
                <option>Bar</option>
                <option>Foo</option>
                <option>Baz</option>
            </select>
            <svg class="slct-drpdwn" id="slct-drpdwn"></svg>
        </div>
        #slct-drpdwn{
                pointer-events: none;
        }


福巴
酒吧
福
巴兹
#slct drpdwn{
指针事件：无；
}

您的javascript正在运行。问题在于不能用javascript“打开”一个
元素。实际上，您可以取消单击事件，但这无助于实际打开
。另外，将
.slct drpdwn
更改为
也不会有多大帮助，因为它只会突出显示关联的元素。我想您应该使用背景图像，或者使select的背景透明，让伪伪元素发光。至少作为IE9的后备方案。你正在隐藏向下箭头。这将显示不匹配的选择和选项宽度。对不起，我不能这么做，我明白。这是我现在拥有的最好的解决方案。嗨，我实际上正在努力使我的上述实现在IE9中工作。这似乎是最接近可能的解决方案。谢谢：）小问题是红色元素无法切换下拉功能。我在这里尝试修复它。我假设你在Mac上。我们可以在Windows上看到这种行为。也许我不明白什么。你能在这里看到这种行为吗？上面的提琴在现代浏览器和Mac上运行良好。在我检查windows modern chrome浏览器之前，单击红色元素总是打开下拉列表，而不是进行切换。目前，由于这里的一些问题，我无法检查Windows系统。一旦我在WindowsIE9上做了测试，我会让你知道的。太棒了，谢谢你的回答。我想我可以用SVG。
$('.slct-drpdwn').click(function() {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown');
    $('select')[0].dispatchEvent(e);
});

 <div class="slct">
            <select>
                <option>Foobar</option>
                <option>Bar</option>
                <option>Foo</option>
                <option>Baz</option>
            </select>
            <svg class="slct-drpdwn" id="slct-drpdwn"></svg>
        </div>
        #slct-drpdwn{
                pointer-events: none;
        }