Javascript event.preventDefault()不工作时出现问题
下面是关于preventDefault()正确用法的一些建议-代码。简言之,我不希望a.dropdownTrigger单击事件跳转到锚。我以为插入event.preventDefault()作为该函数的第一行就可以了,但显然不行 我认为这可能与绑定hashchange事件有关,我正在使用该事件监视对url的更改(单击a.dropdownTrigger元素更新哈希位置,该位置调用hashchange上的侦听器-这样做使我能够捕获到到dropdownTrigger的入站链接,并维护url历史记录) 知道我哪里出错了吗Javascript event.preventDefault()不工作时出现问题,javascript,jquery,Javascript,Jquery,下面是关于preventDefault()正确用法的一些建议-代码。简言之,我不希望a.dropdownTrigger单击事件跳转到锚。我以为插入event.preventDefault()作为该函数的第一行就可以了,但显然不行 我认为这可能与绑定hashchange事件有关,我正在使用该事件监视对url的更改(单击a.dropdownTrigger元素更新哈希位置,该位置调用hashchange上的侦听器-这样做使我能够捕获到到dropdownTrigger的入站链接,并维护url历史记录)
// check inbound anchor links against dropdown ids
if (hash != "" && dropdowns.length != 0 && $.inArray(hash, dropdowns)) {
OpenDropdownForHash(hash);
}
// listen for hashchange once page loads (handles on-page links to dropdown content)
$(window).bind('hashchange', function () {
hash = window.location.hash;
if (dropdowns.length != 0 && $.inArray(hash, dropdowns)) {
OpenDropdownForHash(hash);
}
});
// open the targeted dropdown - var incoming is a bool, differentiate between inbound links and on-page clicks
function OpenDropdownForHash(x) {
$(x).next('.dropdown').toggleClass('open').slideToggle(200);
if ($(x).next('.dropdown').hasClass('open')) { //can this live in the callback above?
$(x).parent().css("-webkit-transition", "all 0.8s ease")
.css("backgroundColor", "white")
.css("-moz-transition", "all 0.8s ease")
.css("-o-transition", "all 0.8s ease")
.css("-ms-transition", "all 0.8s ease")
.css("backgroundColor", '#eeeeee').delay(600).queue(function () {
$(this).css("backgroundColor", "white");
$(this).dequeue(); //Prevents holding color with no fadeOut on second click.
});
}
}
// finally, the basic click handler for dropdowns - update the hash (to allow history), which triggers previously bound hashchange event
$('a.dropdownTrigger').bind('click',function (e) {
e.preventDefault();
if ("#" + $(this).attr('id') == location.hash) { // clicking an open dropdown link doesn't trigger the hashchange event, so we check manually
OpenDropdownForHash("#" + $(this).attr('id'));
}
else { // clicking a closed dropdown does call hashchange, so the OpenDropdownForHash function is called by the listener
location.hash = $(this).attr('id');
}
});
更新:更努力地解决了这个问题,重新处理了click处理程序并简化了hashchange侦听器:
if (dropdowns.length != 0) {
// the basic click handler for dropdowns - update the hash (to allow history), which triggers previously bound hashchange event
$('#mainContentContainer a').bind('click', function (e) {
var target = $(this).attr('href') != null ? $(this).attr('href') : "#" + $(this).attr('id');
var offset = window.pageYOffset;
if ($.inArray(target, dropdowns) && location.hash != target) {
location.hash = target;
window.scrollTo(0, offset);
}
else if ($.inArray(target, dropdowns) && location.hash == target) {
OpenDropdownForHash(location.hash, $(this).hasClass('dropdownTrigger'));
window.scrollTo(0, offset);
}
});
}
$(window).bind('hashchange', function(e) {
OpenDropdownForHash(location.hash, $(this).hasClass('dropdownTrigger'));
});
如果单击链接更新散列,则
e.preventDefault()代码>不工作。检查链接是否真的被绑定
看起来他们不是。尝试替换e.preventDefault()代码>带有警报('I'm bound!!!')
并查看单击链接后发生的情况
您是否已准备好将代码包装到文档中
编辑:如果我理解正确,你的锚点击处理程序是多余的,因为点击链接会更新散列本身。谢谢Petr-我已经用我的解决方案更新了上面的代码。按照我希望的方式工作-最终使用scrollTo而不是preventDefault(),因为后者会破坏页面上可能不针对下拉内容的其他链接。这就是诀窍。