Ausführliche Erläuterung der Nutzungsunterschiede zwischen einem Tag href und onclick in HTML sowie Beispiele für Prioritätsstufen

黄舟
Freigeben: 2017-07-27 13:50:52
Original
2427 Leute haben es durchsucht

Früher habe ich das href und onclick von sehr beiläufig geschrieben, aber nach ein paar Problemen begann ich, auf dieses Problem zu achten:

Erster Auszug aus einem Dokument:

In Javascript ist void ein Operator, der angibt, einen Ausdruck zu berechnen, aber keinen Wert zurückzugeben.

Das Verwendungsformat des Void-Operators lautet wie folgt:

1. javascript:void (expression) 
2. javascript:void expression
Nach dem Login kopieren

Ausdruck ist ein auszuwertender Javascript-Standardausdruck. Die Klammern außerhalb des Ausdrucks sind optional, es empfiehlt sich jedoch, sie zu schreiben. (Implementierungsversion Navigator 3.0)

Sie können den Void-Operator verwenden, um einen Hyperlink anzugeben. Der Ausdruck wird ausgewertet, es wird jedoch nichts in das aktuelle Dokument geladen.

Der folgende Code erstellt einen Hyperlink, der dazu führt, dass dem Benutzer später nichts passiert. Wenn der Benutzer eine Verknüpfung herstellt, wird void(0) als 0 ausgewertet, hat aber keine Auswirkung auf das Javascript.

<A HREF="javascript:void(0)">单此处什么也不会发生</A>
Nach dem Login kopieren

Der folgende Code erstellt einen Hyperlink, der den Benutzer dazu veranlasst, das Formular sofort abzusenden.

<A HREF="javascript:void(document.form.submit())">
Nach dem Login kopieren

Formular hier senden

Der folgende Code führt die Funktion subgo() aus,

<a href="javascript:void(0)" onclick="subgo()">点我</a>
Nach dem Login kopieren
Nach dem Login kopieren

Hier hat javascript:void(0) keine eigentliche Funktion. Es ist nur ein toter Link und die ausgeführte Funktion ist subgo().

点我与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。
Nach dem Login kopieren

Tatsächlich enthält #eine Standortinformation. Der Standardanker ist #top, also der obere Rand der Webseite, und javascript:void(0) stellt nur eine dar toter Link ohne jegliche Informationen. Daher ist es beim Aufrufen eines Skripts am besten, void(0) zu verwenden

href verweist im Allgemeinen auf eine URL-Adresse, und Sie können auch Javascript aufrufen, z. B. href="javascript: xxx();", Dokument Es wird empfohlen, so zu schreiben: xx, aber diese Methode führt manchmal zu seltsamen Ergebnissen Probleme in komplexen Umgebungen, also versuchen Sie es nicht. Die Verwendung des javascript:-Protokolls als href-Attribut von A führt nicht nur dazu, dass das window.onbeforeunload-Ereignis unnötigerweise ausgelöst wird, sondern führt auch dazu, dass das animierte GIF-Bild im IE nicht mehr abgespielt wird.

Wir wissen, dass das Onclick-Ereignis des Links zuerst ausgeführt wird, gefolgt von der Aktion unter dem href-Attribut (Seitensprung oder Javascript-Pseudolink). Ich möchte die Aktion nicht unter dem href-Attribut ausführen. Für die Aktionsausführung muss onclick false zurückgeben. Im Allgemeinen ist onclick="xxx();return false;".

TabPane's JS-Quellcode: Da onclick kein FALSE zurückgibt, führt das Schließen von TABPANE in IFRMAE zu Problemen bei der Ausführung von href und der Seitenanzeige. Die Lösung besteht darin, den folgenden Code mithilfe von TAB in die JSP zu kopieren.

TabPane.prototype.appendTitle = function(tabpage){
  var td = $create("td");
  var strHTML = "<table class="" + TAB_STYLE_TABLE  + "" border="0" cellspacing="0" cellpadding="0"><tr>";
  strHTML +="<td><p class=""+TAB_STYLE_LEFT+""></p></td>";
  strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
  strHTML +="<p style="white-space:nowrap;page-break-before: always;page-break-after: always;">";
  strHTML += tabpage.getTitle();
  strHTML +="</p></td>";
  if(tabpage.showCloseButton){
   strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
   strHTML +="<a class="close" href="#" onclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").close();
return false;
">";
   if(isIE){
    strHTML +="<p></p></a>";
   }else{
    strHTML +="<p class="close"></p></a>";
   }
   strHTML +="</td>";
  }
  if(tabpage.allowReload){
   strHTML +="<td nowarp class=""+TAB_STYLE_MID+"">";
   strHTML +="<a class="reload" href="#" onclick="$o(\"" + this.id + "\").getTab(\"" + tabpage.id + "\").reload();
return false;
">";
   if(isIE){
    strHTML +="<p></p></a>";
   }else{
    strHTML +="<p class="reload"></p></a>";
   }
   strHTML +="</td>";
  }
  strHTML +="<td><p class=""+TAB_STYLE_RIGHT+""></p></p>";
  strHTML +="</td></tr></table>";
  td.className = TAB_STYLE_NOMAL + this.styleSuffix;
  td.innerHTML = strHTML;
  tabpage.__titleTD = td;
  tabpage.setTitleTD();
  tabpage.initStatus();
  this.__titleTR.insertBefore(td,this._titleTD);
  tabpage.titleWidth = td.offsetWidth;
}
Nach dem Login kopieren


href='javascript:function()'> Dies ist so geschrieben, dass der Link nicht auf eine neue Seite verweist und stattdessen einen Teil des JS-Codes ausführt. Es kann den gleichen Effekt haben wie onclick. Wenn Sie ein Skript aufrufen möchten, sollten Sie den Code trotzdem in das onclick-Ereignis schreiben. Es wird nicht empfohlen, href zu verwenden ='javascript:function()' Diese Schreibweise liegt daran, dass nach dem Festlegen des js-Codes im Attribut href in einigen Browsern möglicherweise andere unnötige Ereignisse ausgelöst werden. unbeabsichtigte Effekte hervorrufen.Und Das Onclick-Ereignis wird vor dem Attribut href ausgeführt, sodass es zuerst ausgelöst wird. onclick löst dann href aus. Wenn Sie also nicht möchten, dass die Seite springt, können Sie dies festlegen Der js-Code in onclick gibt am Ende false zurück, sodass der Inhalt von href nicht ausgeführt wird. Schreiben Sie in der Ajax-Anwendung eher wie folgt , um anzuzeigen, dass dieser Link nicht springt, sondern ein js-Skript ausführt.href="javascript:void(0);" onclick="function()">或者 href="javascript:;" onclick="function()">void(0) 只是用来计算一个空值,其实也是什么事情都不做,而分号“;”则表示是一个空的js语句,这样就不会有任何其他跳转发生了,而且W3C标准不推荐在href里面执行javascript语句,所以还是用 onclick事件触发吧

如果不设置 href属性在IE6下面会不响应hover。双击后会选中标签的父容器而非这个一a标签(IE下都存在这一问题)。

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">
Nach dem Login kopieren

所以,比较推荐的写法是假定我们有个fn方法,需要取到这个元素,第一个方法传入的this是空值。

<a href="javascript:void(0)" onclick="fn(this)">
Nach dem Login kopieren

下面代码则执行了subgo()函数,

<a href="javascript:void(0)" onclick="subgo()">点我</a>
Nach dem Login kopieren
Nach dem Login kopieren

在这里,javascript:void(0),没启实质上的作用,它仅仅是一个死链接,执行的函数是subgo()。

点我与<a href="javascript:void(0)" onclick="subgo()">点我</a>区别。
Nach dem Login kopieren

实际上 #包含了一个位置信息默认的锚是#top 也就是网页的上端 ,而javascript:void(0) 仅仅表示一个死链接,没有任何信息。所以调用脚本的时候最好用void(0)

href一般是指向一个URL地址,也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写:<

a href="http://www.111cn.net/zhongxing/U880/ javascript:void(0)" onclick="xxx();">xx</a>,
Nach dem Login kopieren

但是这种方法在复杂环境有时会产生奇怪的问题,尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

我们知道链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接),如果不想执行href 属性下的动作执行,onclick 需要要返回 false ,一般是这样写onclick="xxx();return false;".

TabPane的JS源码,由于onclick没有返回FALSE,当IFRMAE中关闭TABPANE时会导致href执行,页面显示有问题。解决办法就是将下面代码复制到使用TAB的JSP中。

Html A标签中 href 和 onclick 同时使用的问题 优先级别

1 顺序
ie 6 : href 先触发 onclick 后触发
其他浏览器 先触发onlick 后触发 href

2 href="javascript: xxx()"
不能传入this作为参数
onclick可以

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this);">
Nach dem Login kopieren

3 优先触发的方法如果返回 false 导致后一个事件不被触发

比如

<a href="javascript:alert(&#39;href event&#39;);" onclick="clickevent(this); return false;">
Nach dem Login kopieren

4

会导致页面定位到书签位置,

5
由于 1和 4 的原因
在ie6 下 同时有

6 总结:
1) 在不需要传递this作为方法的参数时候,推荐
只使用href="JavaScript: "

2) 如果需要使用this参数,推荐

如下面一个列子。

我们需要A在第一次和第二次点击的时候 访问 href 第3次以后的就访问另一个地址

在a标签的href与onclick中使用javascript的区别


链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接);
假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,onclick 必须得到一个 false 的返回值。不信,你可以将 goGoogle 函数中的 return false 注释掉;
如果页面过长有滚动条,且希望通过链接的 onclick 事件执行操作。应将它的 href 属性设为 javascript:void(0);,而不要是 #,这可以防止不必要的页面跳动;
如果在链接的 href 属性中调用一个有返回值的函数,当前页面的内容将被此函数的返回值代替;
在按住Shift键的情况下会有所区别。
今天我遇到的问题,在IE6.0里以href的形式访问不到parentNode。
尽量不要用javascript:协议做为A的href属性,这样不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。
就这些,花了不少时间在这上面。

[缘由]
用CheckBoxList控件时想实现在每个checkbox后再加链接的功能,点链接实现一些功能之外,还要把checkbox选中。

最后用parentNode来实现的

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Nutzungsunterschiede zwischen einem Tag href und onclick in HTML sowie Beispiele für Prioritätsstufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage