Simulated Click to :target Browser Comparison

Fiddle to demonstrate the differences between Webkit and Gecko browsers when creating links on the fly. Create a link on the fly with JavaScript when running in a Webkit browser and the event bubbles all the way up as expected. In Gecko, however, this is not the case. An even listener for the JavaScript click() might also solve this, but here I've used a no-display anchor/link instead.

by kpowz

HTML

<a href='#targ' id='me' >some bunny loves me</a>


<div id='targ'>
    <a href="#" class='clickme'>close</a>
   fake anchor clicked
</div>

CSS

.clickme {
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}

#me{
    display: none;
}

div{
    
    min-height: 20px:
}

#targ:target{
    
    color: red;
}

JavaScript

function workyAllBrowsers( ){
   alert('executed non-displayed anchor click');
   var ele = document.getElementById('me');
   ele.click();   
}

function noWorkyInGecko( ){
   alert('executed adhoc anchor click');
   var o=document.createElement("a");
   o.href="#targ";
   o.click();
}


setTimeout(noWorkyInGecko, 2000);
setTimeout(workyAllBrowsers, 7000);