Using "return false;" in onclick Event in JavaScript
2014-06-27 22:05
573 查看
In my job, I have read the html files of many static webpages. It seems that people like to use the onclick JavaScript event with the window.open() JavaScript method to create links that open web content in new pages. The syntax is usually
like this:
Aftering seeing this so many times, I began to raise a question : what is the function of the "return false;" statement? I design some experiments and soon found out the answer.
This example above is straight forward. I compared the two links, one without
"return false;" and one with it. The one without it would open two new windows when clicked as both the a link and the onclick event are triggered. The one with it would only open a window for CSDN. Why do they behave differently? It is because
the"return false;" statement prevents the default behaviour of the browser, that is, opening a new window for Google.
You may think that the "return false;" statement is not so useful in the example above. Actually, we can do some simple interaction using the mechanism. For example, in the code below, the onclick event has the confirm() JavaScript method
as its event handler. The confirm() method returns true when we click "OK" in the dialog box and false otherwise. Therefore, we can use the confirm() method to control whether the webpage in the a link would be opened.
However, don't abuse the use of "return false;" in your webpages. It may be confusing and difficult to maintain sometimes. In simple inline event handler like the examples above, it is acceptable to use it. However, using it in complicated functions may
cause unpredictable behaviours. I may write posts about it later to analyse the issue.
Do you find it interesting? Share it with your friends if you like the post. I will try to dig out more secrets of JavaScript in the near future.
like this:
<a href="http://www.csdn.net" onclick="window.open(this.href); return false;" title="CSDN">CSDN</a>
Aftering seeing this so many times, I began to raise a question : what is the function of the "return false;" statement? I design some experiments and soon found out the answer.
<!--two windows would be opened--> <a href="http://www.google.com.hk" target="_blank" onclick="window.open('http://www.csdn.net')">This is a link</a> <!--return false to prevent default behaviour--> <a href="http://www.google.com.hk" target="_blank" onclick="window.open('http://www.csdn.net'); return false;">This is a link</a>
This example above is straight forward. I compared the two links, one without
"return false;" and one with it. The one without it would open two new windows when clicked as both the a link and the onclick event are triggered. The one with it would only open a window for CSDN. Why do they behave differently? It is because
the"return false;" statement prevents the default behaviour of the browser, that is, opening a new window for Google.
You may think that the "return false;" statement is not so useful in the example above. Actually, we can do some simple interaction using the mechanism. For example, in the code below, the onclick event has the confirm() JavaScript method
as its event handler. The confirm() method returns true when we click "OK" in the dialog box and false otherwise. Therefore, we can use the confirm() method to control whether the webpage in the a link would be opened.
<a href="http://www.google.com.hk" target="_blank" onclick="return confirm('Are you sure?');">This is a link</a>
However, don't abuse the use of "return false;" in your webpages. It may be confusing and difficult to maintain sometimes. In simple inline event handler like the examples above, it is acceptable to use it. However, using it in complicated functions may
cause unpredictable behaviours. I may write posts about it later to analyse the issue.
Do you find it interesting? Share it with your friends if you like the post. I will try to dig out more secrets of JavaScript in the near future.
相关文章推荐
- 关于IE6下的onclick return false 与 javascript void(0)
- 在JS中 onclick="save();return false;"return false是
- Javascript中return false 与 event.preventDefault() 的区别?
- onclick="return checkForm()" 、onclick="checkForm();return false;"解析 与 return false;
- JavaScript Onclick Return False
- onclick="showpic(this); return false;"
- 遇到困难 jsp代码onclick="javascript:return(checklogin());"报错
- Button Attributes.add("onclick","if(!confirm("msg"){return false;})")
- onselectstart="javascript:return false;"
- One point about the return value in Javascript
- javascript window.event.clientX in Firefox and cursor:pointer
- PRB: "Requested Registry Access Is Not Allowed" Error Message When ASP.NET Application Tries to Write New EventSource in the Eve
- AutoEventWireup="false"导致Page_Load事件未执行
- AutoEventWireup="false"导致Page_Load事件未执行
- Highlight a Row in GridView without a postback using ASP.NET and JavaScript
- <script language="javascript" FOR="window" EVENT="onload"> 以前不知道怎么用 现在记下来
- onclick="return confirm('此操作不可恢复,您确认要这样操作吗?')"
- Using JavaScript in Page Flow and Portal Applications
- C# WinForm webBrowser 内嵌网页的按钮的OnClientClick事件的return false 在webBrowser中绑定onclick事件后 失效 的变通解决办法
- Using Visual Studio to Debug JavaScript in IE