尝试实现指针事件：在 JavaScript 中没有

Question

I have a select dropdown to which I am trying to remove the down arrow using a dummy mask element. But when I click that mask element, the select dropdown is not triggering.

Check this Fiddle

If I give pointer-events: none to .slct-drpdwn , everything works fine but sadly this isn't supported in IE9. So, I thought to implement css pointer-events: none like behavior using JavaScript.

Here is the JavaScript code which isn't doing anything:

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

Try this if you don't want to use overflow:hidden; : http://jsfiddle.net/MadalinaTn/1c7hqddy/1/

    .slct {
    position:relative;
    display:block;
    border:solid black 1px;
    float:left;
    overflow: hidden;
}
div select {
    z-index:1;
    background: transparent;
    border:0;
    width: 200px;
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}
.slct .slct-drpdwn {
    display:block;
    position:absolute;
    right:0;
    top:0;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index: -1;
}

Answer 2

Try with jQuery:

http://jsfiddle.net/MadalinaTn/5cbobco5/3/

$('.slct-drpdwn').click(function() {
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('mousedown');
    $('select')[0].dispatchEvent(e);
});

Answer 3

IE9 recognizes pointer events: none, but only for SVG elements. Try this:

 <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/

Answer 4

You can resolve this in css, without 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;
}

http://jsfiddle.net/MadalinaTn/fj53g8k9/1/