javascript - How to prevent pointer pass through in HTML? -

i have unordered list on text, like:

<a href="http://google.com">   <ul>     <li>ok</li>   </ul> </a> 

the unorder list positioned absolute above text using css

a {   position:relative; } ul {   position: absolute;   top:0;   left:0; } 

then use jquery's .on function make li respond click:

$(document).on("click", "li", function() {   alert('hello'); }); 

however, when click on li, link in clicked , makes me go google.com.

how can prevent link in when click on li?

the demo can found at: http://jsfiddle.net/jfq8l/

$(document).on("click", "li", function(e) {     e.preventdefault();     alert('hello'); });