[英]Is it possible to trigger 2 events at the same time, using JavaScript?
我试图通过单击右侧导航上的“过去位置”链接同时触发2个事件,以跳至“过去位置”部分的底部页面,并在该页面上路由默认图像地图(印第安纳波利斯地图)同时。
目前,它可以很好地跳到页面底部,但是图像地图消失了-在地图的占位符中什么也没有显示。
HTML-其他两个工作链接可路由图像地图
<li class="j_linkHover">
<a href="#mapCO-asp" class="j_linkThumb">Aspen, CO</a>
<p class="j_accordion-panel"><span class="j_dateLocation">Central Regions<br>May 29 - June 3</span></p>
</li>
<li class="j_linkHover">
<a href="#mapOR" class="j_linkThumb">Salem, OR</a>
<p class="j_accordion-panel"><span class="j_dateLocation">Oregon School for the Deaf,<br>Washington School for the Deaf, <br> Non-Profit Community Event<br>June 3 - 6</span></p>
</li>
<li class="j_linkHover">
<a href="javascript: document.body.scrollIntoView(false);" id="location-color" class="j_linkThumb is-active">Past Locations</a> <--- jumps to the bottom, but cannot route image map at the same time
</li>
JavaScript-这会在占位符中路由图像映射
$(document).ready(function(){
//Default Action
$(".mapActive").css({'display':'none'});
$("ul.j_linkLocation li#mapIN").addClass("active").show(); //Activate first tab
$(".mapActive#mapIN").show(); //Show first tab content
//On Click Event
$("ul.j_linkLocation li").click(function() {
$("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".mapActive").css({'display':'none'}); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn('fast'); //Fade in the active content
return false;
});
});
要重用相同的功能,请在功能中对其进行定义:
function routeImages (elem) {
$("ul.j_linkLocation li").removeClass("active"); //Remove any "active" class
$(elem).addClass("active"); //Add "active" class to selected tab
$(".mapActive").css({'display':'none'}); //Hide all tab content
var activeTab = $(elem).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn('fast'); //Fade in the active content
}
因此,现在您的旧代码变为:
//On Click Event
$("ul.j_linkLocation li").click(function() {
routeImages($(this));
});
然后向列表项添加一个单击侦听器:
$('#location-color').parent('li').on('click', function() {
//the first event
$('body').scrollIntoView(false);
//call the function for routing images
routeImages($('ul.j_linkLocation li:first'));
});
是的...使用jQuery(这是一个JavaScript库)...您可以将多个event
附加到一个元素。
$([element selector]).on([events... space separated], [Delegated selector], function([arg]){
// Whatever to execute
});
更具体的示例(语法充分使用):
$("#myDiv").on("click mouseenter mouseleave tap touchstart touchend", ".innerBox", function(event){
// Whatever to execute
});
阅读有关jQuery 事件处理程序的信息 。
这是我知道的最完整的事件列表 。
额外阅读将有关事件委托 ...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.