Javascript onClick 触发两个事件
[英]Javascript onClick fires two events
问题描述
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 ).
我为我的一个朋友整理了一个快速网站，我基本上只是使用查询滑块来管理所有内容，但是当访问者点击播放他的一首歌曲时，它似乎也触发了导航（由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.问题是播放音乐也会使用滑块，而我在 JavaScript/jQuery 方面还不够好，还没有弄清楚如何分离这两个事件。 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>
2 个解决方案
解决方案1
1 已采纳 2012-11-02 17:58:22
Your html has a lot of unclosed tags, try it with a fixed and indented html:您的 html 有很多未闭合的标签，请尝试使用固定和缩进的 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>
解决方案2
0 2012-11-02 17:54:30
event.preventDefault() could solve your problem. event.preventDefault() 可以解决您的问题。 Just prevent the default behavior of the button and let js fire the correct event.只是阻止按钮的默认行为，让 js 触发正确的事件。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.