Javascript onClick fires two events

Question

I threw together a quick website for a friend of mine and I basically just used a query slider to manage all of the content, however when a visitor clicks play on one of his songs, it also seems to fire off the navigation (triggered by onClick ). The problem is that playing the music also engages the slider and I am not good enough at JavaScript/jQuery yet to figure out how to separate the two events. Any help would be greatly appreciated.

<script>

function goto(id, t){   
//animate to the div id.
$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);

// remove "active" class from all links inside #nav
$('#nav a').removeClass('active');

// add active class to the current link
$(t).addClass('active');    
}

</head>

<body>
    
    <div id="wrap">
    
    <div id="header">
            <img src="images/header.gif" width="320" height="59">
            
            
      </div>
        
    <div id="content">
    <div id="nav">
        <ul>
            <li ><a class="active" href="#" onClick="goto('#about', this); return false"><img src="images/bioblack.gif" width="93" height="55"></a></li>
            <li><a href="#" onClick="goto('#work', this); return false"><img src="images/soundblack.gif" width="146" height="55"></li>
            <li><a href="#" onClick="goto('#contact', this); return false"><img src="images/contactblack.gif" width="183" height="54"></li>
        </ul>
    </div>
    
        <div class="contentbox-wrapper">
            
            <div id="about" class="contentbox">
                            
            
            <img src="images/bio.gif" width="549" height="270">
          </div>
            
            <div id="work" class="contentbox">
            
         

            <img src="images/slowlane.gif" width="165" height="38">
          

            <embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed> 
            
            <img src="images/speedlimit.gif" width="169" height="39">
            <embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>
             
            <img src="images/fastlane.gif" width="169" height="37">
            <embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed> 
                        
              </div>
        
            <div id="contact" class="contentbox">
            
            <img src="images/contact.gif" width="422" height="188"></div>
    
        </div>          
        
    </div>

Answer 1

Your html has a lot of unclosed tags, try it with a fixed and indented html:

<body>
    <div id="wrap">
        <div id="header">
            <img src="images/header.gif" width="320" height="59">
        </div>

        <div id="content">
            <div id="nav">
                <ul>
                    <li>
                        <a href="#" onClick="goto('#about', this); return false" class="active">
                            <img src="images/bioblack.gif" width="93" height="55">
                        </a>
                    </li>
                    <li>
                        <a href="#" onClick="goto('#work', this); return false">
                            <img src="images/soundblack.gif" width="146" height="55">
                        </a>
                    </li>
                    <li>
                        <a href="#" onClick="goto('#contact', this); return false">
                            <img src="images/contactblack.gif" width="183" height="54">
                        </a>
                    </li>
                </ul>
            </div>

            <div class="contentbox-wrapper">

                <div id="about" class="contentbox">
                    <img src="images/bio.gif" width="549" height="270">
                </div>

                <div id="work" class="contentbox">
                    <img src="images/slowlane.gif" width="165" height="38">
                    <embed height="45" alt="slow lane" width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/6_People_Get_Ready_This_Is_Rock_Steady_.aiff"></embed> 

                    <img src="images/speedlimit.gif" width="169" height="39">
                    <embed height="45" alt="speed limit"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/7_Odyssey.aiff"></embed>

                    <img src="images/fastlane.gif" width="169" height="37">
                    <embed height="45" alt="fast lane"width="500" autoplay="false" autostart="false" type="audio/mpeg" src="music/9_Salsa_Verde.aiff"></embed> 
                </div>

                <div id="contact" class="contentbox">
                    <img src="images/contact.gif" width="422" height="188"></div>
                </div>
            </div>
        </div>
    </div>
</body>

Answer 2

event.preventDefault() could solve your problem. Just prevent the default behavior of the button and let js fire the correct event.

Javascript onClick fires two events

Question

2 answers

solution1
1 ACCPTED 2012-11-02 17:58:22

solution2
0 2012-11-02 17:54:30

Javascript onClick fires two events

Question

2 answers

solution1 1 ACCPTED 2012-11-02 17:58:22

solution2 0 2012-11-02 17:54:30

solution1
1 ACCPTED 2012-11-02 17:58:22

solution2
0 2012-11-02 17:54:30