当我想在某个事件被触发后阻止其他事件处理程序执行时,我可以使用两种技术之一.我将在示例中使用jQuery,但这也适用于plain-JS:
event.preventDefault()$('a').click(function (e) {
// custom handling here
e.preventDefault();
});
Run Code Online (Sandbox Code Playgroud)
return false$('a').click(function () {
// custom handling here
return false;
});
Run Code Online (Sandbox Code Playgroud)
这两种停止事件传播的方法之间有什么显着差异吗?
对我来说,return false;比执行方法更简单,更短并且可能更不容易出错.使用该方法,您必须记住正确的套管,括号等.
另外,我必须在回调中定义第一个参数才能调用该方法.也许,有一些原因可以解释为什么我应该避免这样做并使用preventDefault呢?有什么更好的方法?
javascript jquery event-handling event-propagation dom-events
我的同事一直在使用带有小写"f"的"new function()"来定义JavaScript中的新对象.它似乎在所有主流浏览器中运行良好,并且在隐藏私有变量方面似乎也相当有效.这是一个例子:
var someObj = new function () {
var inner = 'some value';
this.foo = 'blah';
this.get_inner = function () {
return inner;
};
this.set_inner = function (s) {
inner = s;
};
};
Run Code Online (Sandbox Code Playgroud)
一旦使用"this",它就成为someObj的公共财产.所以someObj.foo,someObj.get_inner()和someObj.set_inner()都是公开的.另外,set_inner()和get_inner()是特权方法,因此它们可以通过闭包访问"内部".
但是,我在任何地方都没有看到任何对此技术的引用.甚至Douglas Crockford的JSLint抱怨它:
- 怪异的建筑.删除'新'
我们在生产中使用这种技术,它似乎运作良好,但我有点担心它,因为它没有在任何地方记录.有谁知道这是否是一种有效的技术?
我知道,有几个帖子几乎有相同的问题,但所有提到的"修复"都不适合我.
但首先,这就是我需要的:我的应用程序中的某些表单必须通过激活编辑模式来启用.如果编辑模式处于活动状态,则每个按钮(保存和中止除外)和页面上的链接都不应该执行正常操作,但是它应该给出一条消息,您必须结束编辑模式.
我的脚本:启动编辑模式的按钮调用:
function startEditMode(selector) {
var disableAction = "return false;";
jQuery("mySelectors").each(function(){
jQuery(this).bind('click', editModeOnClickHandler);
var onClickValue = "";
var onClick = jQuery(this).attr("onClick");
if ( onClick !== undefined ) onClickValue = "" + onClick;
jQuery(this).attr("onClick", disableAction + onClickValue);
});
}
Run Code Online (Sandbox Code Playgroud)
要停止编辑模式,存在一种方法可以反转所有这些.使用的处理程序"editModeOnClickHandler"只显示消息并返回false; 对我的问题并不重要.
所以......在FF和IE8(也在Chrome中)一切正常,但在IE7中却没有.当我在其他帖子中读到时,onClick在IE7中不会通过.attr进行修改.
到处张贴的解决方案:使用事件绑定而不是操纵属性.我希望我能用它!
这就是我无法解决的原因:我试图取消绑定所有处理程序并绑定我自己的处理程序,如上面的代码所示.但这并不妨碍内联onclick被调用.好吧你可能会想,不要使用内联调用..但我的项目使用Primefaces在JSF中编写,其大部分代码都是动态生成的.总而言之,我没有可能阻止内联onclicks.
现在我被卡住了.我必须处理内联onclicks,只能通过插入"return false"来阻止它被调用.在前面,但这似乎不可能与IE7.
有没有人知道IE7的解决方法能够操作onclick属性?再说一次:我不能使用.bind('click'...或.click(因为它们无法阻止原始的内联onclick.
谢谢你的回答!亚历克斯
在你的帮助下编辑我想出来,在IE7中更改内联onclick是可能的this.onclick = ...在这个问题中回答了正确的处理:如何动态更改onClick处理程序?
对于我在这里的具体问题,我找不到合适的解决方案,因为我无法操纵原始的内联onclick值而不会让他们失望.出于这个原因,我改变了我的脚本,因此IE7禁用所有按钮和链接以确保它们不再可点击.可以肯定的是,不要启用太多,也要添加一个类名.
禁用所有尚未禁用的(在循环中调用):
if (!jQuery(this).attr('disabled')) {
jQuery(this).attr('disabled', 'disabled');
jQuery(this).addClass('editmodedisabled');
}
Run Code Online (Sandbox Code Playgroud)
启用我以前禁用的东西:
if (jQuery(this).hasClass('editmodedisabled')) {
jQuery(this).attr('disabled', '');
jQuery(this).removeClass('editmodedisabled');
}
Run Code Online (Sandbox Code Playgroud)
也许这有助于其他人
我已经看了十多问题有关使用onclick,click,bind("click", ...),on("click", ...),等,还没有发现我有这个问题.
基本上它是一个可扩展的div,在不扩展时会隐藏一些内容.我正在使用collapse带有数据切换按钮的Twitter Bootstrap 类来扩展/折叠内容本身,但我还需要修改容器div的CSS以增加高度,以便在视觉上,内容所在的框将拉伸包含它.
这是我的脚本代码:
$(document).ready(function() {
$("#expand-button").bind('click', expandClick($));
document.getElementById("#expand-button").bind("click", expandClick($));
});
function expandClick($) {
$("#outer-container").animate({ "height": "350" }, 500);
$("#expand-button").html("^");
$("#expand-button").bind("click", collapseClick($));
};
function collapseClick($) {
$("#outer-container").animate({ "height": "50" }, 500);
$("#expand-button").html("V");
$("#expand-button").bind("click", expandClick($));
}
Run Code Online (Sandbox Code Playgroud)
这个想法很简单,处理程序根据按钮的状态旋转进出.实际发生的是,只要我加载页面,就会立即执行expandClick函数,这会导致我的容器无限循环,尽管没有被点击,但是上下都会弹跳.
有任何想法吗?
此外,我不认为它应该是相关的,但HTML看起来像:
<div id="outer-container" class="container-fluid subsession-collapsed">
<div class="row-fluid" style="height: 50px">
<!-- OTHER STUFF... -->
<div class="span1" id="4">
<button id="expand-button" class="btn-success" data-toggle="collapse" data-target="#expandable">V</button>
</div>
</div>
<br /><br />
<div id="expandable" class="row-fluid collapse"> …Run Code Online (Sandbox Code Playgroud)