`
jaroddang
  • 浏览: 31785 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript Onclick Return False

阅读更多
本文译者注
      下面的一小段文章,说明了在HTML标签中加入带有返回值的Onclick事件,当返回值为false时,对原标签的影响。在文章最后一段用到了Prototype,很遗憾本人并没有使用过此框架,翻译的可能有失准确。   
      这是本人第一次翻译文章,英文水平,JS水平均有限,也只是练习性质的翻译,如有不妥之处,感谢留言相告。
 

 

在HTML代码中,无论你在哪里放置了onclick事件,并且返回值为false时,那么该处的默认行为将不会执行。这里的默认行为是指没有Onclick事件时原本的行为。

 

举一个例子:

 

<a href="http://www.nojs.com" onclick="doSomething(); return false;">Click Me</a>

在上面的例子中,如上面所说点击(click)这个链接,那么动作进行将会截止到doSomething()函数全部完成,而并不会继续跳转到"http://www.nojs.com"(除非IE等浏览器端禁用了JavaScript)。

 

为了让上面的例子继续进行下一步,我们可以放置一个confirm函数强迫用户去决定他们是否愿意继续跳转,如果用户选择“是”,那么函数返回ture,页面跳转到“http://www.nojs.com”。

如下面这个例子:

<a href="http://www.nojs.com" onclick="return confirm('Are you sure you want to do that?');">Click Me</a>

 

最后还有个小技巧,当我用AJAX或触发一个div时,出现了一个让我恼火的情况,我点击了链接并且click事件已经完成,虽然链接没有跳转但还是变成了还是被选中过的颜色。虽然这无关紧要,但还是有一个办法可以不让这个发生,简单的说,可以模糊(blur)这个焦点让他看上去不是焦点

 

来看一个简单的例子:

<a href="" id="bjd" onclick="Element.toggle('MyDiv'); $('bjd').blur(); return false;">Toggle MyDiv</a>

 在上面这个例子里使用了prototype,如果你不了解prototype,你可以访问这个链接来了解一下Prototype

 

原文地址

http://www.bradino.com/javascript/onclick-return-false/

分享到:
评论
1 楼 wuyufeixue 2011-06-03  
  写的不错

相关推荐

    JavaScript中return false的用法

    Return False 就相当于终止符,Return True 就相当于执行符。在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的onclick事件(如果你指定的话)以外还要触发一个默认事件就是执行...

    完美实现js拖拽效果 return false用法详解

    例如,点击链接时默认会跳转到href指定的地址,但如果我们希望阻止这个跳转,可以在`onclick`事件中使用`return false`。 2. **中断事件冒泡**:在事件冒泡模型中,事件会从最深的节点向上冒泡到父节点。`return ...

    用javascript 禁止右键,禁止复制,禁止粘贴

    return false; }; ``` 这样,当用户尝试复制网页内容时,将出现提示框,禁止用户复制。 三、禁止粘贴 使用 JavaScript 也可以禁止用户粘贴内容到网页中。例如,可以在 `&lt;body&gt;` 和 `&lt;/body&gt;` 之间加入以下语句...

    JavaScript中return用法示例

    在JavaScript中,`return`语句扮演着至关重要的角色,它是函数执行过程中的一个控制流关键字,用于从函数中返回一个值或结束函数的执行。本篇将详细探讨`return`的用法,以及它在实际编程中的应用场景。 首先,`...

    Javascript

    使用 `oncontextmenu="window.event.returnValue=false"` 可以彻底屏蔽鼠标右键。 2. 取消选取、防止复制 使用 `&lt;body onselectstart="return false"&gt;` 可以取消选取和防止复制。 3. 不准粘贴 使用 `onpaste=...

    JavaScript 经典代码大全

    2. `&lt;body onselectstart="return false"&gt;`:此代码可以阻止用户在页面上的文本选择,防止内容被复制。 3. `onpaste="return false"`:这行代码禁止了在文本输入框或其他元素中粘贴内容的功能。 4. `oncopy=...

    javascript.doc

    3. `onpaste="return false"`、`oncopy="return false;"` 和 `oncut="return false;"`:这些代码组合在一起可以阻止用户在输入框等元素中进行剪切、复制和粘贴操作。 4. `...

    javascript实现删除前弹出确认框.docx

    &lt;a href="" onclick="javascript:return del();"&gt;删除 ``` 方法二:使用 confirm 函数和 window.event.returnValue 在这个方法中,我们使用了 confirm 函数和 window.event.returnValue 属性来实现确认框的功能。...

    Javascript的运用与提高.pdf

    return false;'&gt;My Example&lt;/a&gt;` 或 `&lt;a href='' onclick='popUp(this.href);return false;'&gt;My Example&lt;/a&gt;` 或 `&lt;a href='http://www.myexample.com' onclick='popUp(this.href);return false;'&gt;My Example&lt;/a&gt;`。...

    Javascript中最常用的61个经典技巧

    3. **禁用剪贴板操作**:`onpaste="return false"` 和 `oncopy="return false; oncut="return false;"` 可以阻止用户在特定元素上执行复制、剪切和粘贴操作,保护敏感数据。 4. **设置收藏夹图标**:通过 `...

    return false,对阻止事件默认动作的一些测试代码

    在JavaScript中,`return false` 是一种常见的方法,用于阻止事件的默认行为。然而,它的效果并不总是跨浏览器一致,特别是在不同的事件处理程序之间以及不同浏览器的实现中。标题和描述提到的测试代码是为了探究 `...

    JavaScript中的return语句简单介绍

    olink.onclick = function() { return false; } } 点击我 ``` 在这个例子中,点击链接并不会导航到`href`指定的网页,因为`onclick`事件处理函数返回了`false`,阻止了默认的链接点击行为。 4. 阻止事件...

    JavaScript实用技巧集锦

    通过 在表格中添加 oncontextmenu="window.event.returnValue=false" 属性,可以彻底屏蔽鼠标右键的功能。 2. 取消选取、防止复制 通过在 body 标签中添加 onselectstart="return false" 属性,可以取消选取和防止...

    javascript禁止超链接跳转的方法.docx

    在点击事件监听器中,我们使用 `alert` 函数来弹出一个警告框,并使用 `return false` 语句来阻挡超链接跳转。 ##### 2.2 使用 `preventDefault` 阻挡超链接跳转 另一种方法是使用 `preventDefault` 方法来阻挡...

    JavaScript常用的55种技巧

    1. `oncontextmenu` 事件:通过设置 `window.event.returnValue=false`,可以禁用鼠标右键菜单,例如在表格元素中使用 `&lt;table oncontextmenu="return(false)"&gt;`。 2. `onselectstart` 事件:通过设置 `...

    常用的javascript脚本

    如:`”return false”&gt;` 和 `Oncopy=”return false” oncut=”return false”` 3. 禁止粘贴功能: 使用`onpaste`事件可以禁用粘贴功能,例如:`Onpaste=”return false”` 4. 更改IE浏览器地址栏图标: 通过`...

    javascript版日期选择器

    return false;" NAME="anchor1x" id="anchor1x"&gt;select ;"&gt; &lt;A HREF="#" onClick="cal1x.select(document.all.date1x2,'anchor1x2','yyyy-MM-dd'); return false;" NAME="anchor1x2" id="anchor1x2"&gt;select&lt;/A&gt;

    Javascript中最常用的55个经典技巧

    3. 禁用粘贴、复制和剪切:利用`onpaste="return false"`、`oncopy="return false"`和`oncut="return false"`,可以阻止用户在输入框或其他元素中进行这些操作。 4. 自定义浏览器图标:通过`...

    详解a标签添加onclick事件的几种方式

    ### 方法5: `href="#"` + `onclick` + `return false;` ```html &lt;a href="#" onclick="js_method();return false;"&gt;点击我 ``` 这个方法结合了`#`和`return false;`,点击后执行`js_method()`,然后阻止默认的页面...

Global site tag (gtag.js) - Google Analytics