jquery separate the onclick events of wrapped elements_问答_开发者

jquery separate the onclick events of wrapped elements

开发者 https://www.devze.com 2023-01-15 13:22 出处：网络

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 ev

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/