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

Früher habe ich das href und onclick von 72d4ced2cc960a6bc2541984146fdaaa 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

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>

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

<A HREF="javascript:void(document.form.submit())">

Formular hier senden63505a6f727f70c8bd4066f3066dcb9d

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

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

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>区别。

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: 97645ab94f319ea0ad8ad3c2666043a5xx5db79b134e9f6b82c0b36e0489ee08ed, 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;
}

a439bf1a004d41787960405e04afa1b2 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.72e4edd2d085fdcb47b53f5e502e5ff75db79b134e9f6b82c0b36e0489ee08ed或者 545e03930b8a5bfef9f2a7d842d13b325db79b134e9f6b82c0b36e0489ee08edvoid(0) 只是用来计算一个空值，其实也是什么事情都不做，而分号“;”则表示是一个空的js语句，这样就不会有任何其他跳转发生了，而且W3C标准不推荐在href里面执行javascript语句，所以还是用 onclick事件触发吧

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

<a href="javascirpt:fn(this)"> <a onclick="fn(this)">

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

<a href="javascript:void(0)" onclick="fn(this)">

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

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

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

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

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

    href一般是指向一个URL地址，也可以调用javascript ,如href="javascript:xxx();",文档中推荐这样写：a8fcd39b1b46247ccd0f10983ba5bd30 会导致页面定位到书签位置，

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

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

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

<a href="javascript:void(0);" onclick="doSomthing(this)" >

如下面一个列子。 

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

var href=0
function clicka(obj)
{
 if (href==2)
 {
  obj.href="http://www.baidu.com?qc";
 }else
 {
  href++;
 }
 return true;
}
<a href="http://www.111cn.net/" target=_blank id="showa" onclick="clicka(this)">  开屏高速下载 </a>

在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选中。

<input type="checkbox" name="chk" id="chk">
<label for="chk">选中它<a onclick="this.parentNode.click();" href="http://luwenxiang1990.blog.163.com/blog/#" style="border:solid 1px blue;">[label中的链接]</a>
</label>

最后用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!