javascript - 尝试实现指针事件: none in JavaScript

Question

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

检查这个Fiddle

如果我将 pointer-events: none 赋予 .slct-drpdwn，则一切正常，但遗憾的是 IE9 不支持此功能。因此，我想使用 JavaScript 来实现类似 css pointer-events: none 的行为。

这是没有执行任何操作的 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();
}

Answer 1

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;
        }

http://jsfiddle.net/MadalinaTn/u8oea7nt/2/