jquery separate the onclick events of wrapped elements
I have an anchor link inside a div. I would like both the anchor link and div to process onclick events separately, but right now clicking on 开发者_如何学Gothe anchor link also triggers the onclick event for the div. How do I prevent this?
Here's the code:
<html>
<head>
<style>
#box {
background-color: #ccffcc;
width: 400px;
height: 200px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#mailto").click(function(event) {
// correctly opens an email client if clicked
$("a[@href^='http']").attr('target','_blank');
return( false );
});
$("#box").click(function() {
// always goes to the home page, even if the #mailto id is clicked
window.location = '/index.php';
});
});
</script>
</head>
<body>
<div id="box">
<a href="mailto:someone@psomewhere.com" id="mailto">someone@psomewhere.com
</div>
</body>
</html>
Is there a way for me to stop execution of the code after the mailto is loaded?
Thanks!
John
you need to make sure your html is valid, so finish the a tag off:
<a href="mailto:someone@psomewhere.com" id="mailto">someone@psomewhere.com<a/>
and if that still causes problems try this.
$("#mailto").click(function(event)
{
event.stopPropagation();
if(event.srcElement == 'HTMLAnchorElement')
{
//Process
}
});
It might be due to your anchor not being closed properly. Or it certainly won't be helping
The event is bubbling up the DOM tree, e.stopPropagation(); will stop that.
$("#mailto").click(function(event) {
event.stopPropagation();
// correctly opens an email client if clicked
$("a[@href^='http']").attr('target', '_blank');
return (false);
});
$("#box").click(function() {
// always goes to the home page, even if the #mailto id is clicked
window.location = '/index.php';
});
Fiddle http://jsfiddle.net/uwJXK/
About stopPropagation() http://api.jquery.com/event.stopPropagation/
加载中,请稍侯......
精彩评论