crbug.com/328304 visibility change on click

by int32_t

HTML

<div class="parent">
<div id="clicktarget1" tabindex=0></div>
</div>
<div id="clicktarget2" tabindex=0></div>
<hr/>
<pre id=console></pre>

CSS

.parent {
    padding: 8px;
    background: lime;
}

#clicktarget1 {
    border: 1px solid blue;
    width: 40px;
    height: 40px;
    margin: 8px;
    position: absolute;
}

#clicktarget2 {
    border: 1px solid red;
    width: 40px;
    height: 40px;
    margin: 8px;
    position: relative;
}

JavaScript

function log(str) {
    document.getElementById('console').innerHTML += str + '\n';
}
function trackEvent(e) {
    log(e.type + ' on ' + e.target.tagName);
}
document.addEventListener('mousedown', trackEvent, false);
document.addEventListener('mouseup', trackEvent, false);
document.addEventListener('click', trackEvent, false);

document.addEventListener('mousedown', function(e) {
    if (e.target.id == 'clicktarget2')
        e.target.style.display = 'none';
    else if (e.target.id == 'clicktarget1')
        e.target.style.visibility = 'hidden';
}, false);