Explication détaillée des différences d'utilisation entre une balise href et onclick en HTML et exemples de niveaux de priorité

J'avais l'habitude d'écrire le href et le onclick de de manière très décontractée, mais après quelques problèmes, j'ai commencé à prêter attention à ce problème :

Premier extrait d'un document :

En Javascript, void est un opérateur, qui précise de calculer une expression mais de ne pas renvoyer de valeur. Le format d'utilisation de l'opérateur

void est le suivant :

1. javascript:void (expression) 
2. javascript:void expression

l'expression est une expression standard Javascript à évaluer. Les parenthèses en dehors de l’expression sont facultatives, mais constituent une bonne pratique à écrire. (Version d'implémentation Navigator 3.0)

Vous pouvez utiliser l'opérateur void pour spécifier un lien hypertexte. L'expression sera évaluée mais rien ne sera chargé dans le document actuel.

Le code ci-dessous crée un lien hypertexte qui ne fera rien arriver à l'utilisateur plus tard. Lorsque l'utilisateur crée un lien, void(0) est évalué à 0, mais n'a aucun effet sur le Javascript.

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

Le code suivant crée un lien hypertexte qui amènera l'utilisateur à soumettre le formulaire instantanément.

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

Envoyer le formulaire ici

Le code suivant exécute la fonction subgo(),

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

Ici, javascript:void(0) n'a pas de fonction réelle. C'est juste un lien mort, et la fonction exécutée est subgo().

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

En fait, #contient une information de localisation. L'ancre par défaut est #top, qui est le haut de la page Web, et javascript:void(0) ne représente qu'une. lien mort sans aucune information. Par conséquent, lors de l'appel d'un script, il est préférable d'utiliser void(0)

href pointe généralement vers une adresse URL, et vous pouvez également appeler javascript, tel que href="javascript : xxx();", document Il est recommandé d'écrire ainsi : xx, mais cette méthode provoque parfois d'étranges problèmes dans des environnements complexes, alors essayez de ne pas utiliser javascript: protocol comme attribut href de A non seulement provoquera le déclenchement inutile de l'événement window.onbeforeunload, mais entraînera également l'arrêt de la lecture de l'image gif animée dans IE.

Nous savons que l'événement onclick du lien est exécuté en premier, suivi de l'action sous l'attribut href (saut de page, ou pseudo-lien javascript si vous le faites). Je ne veux pas exécuter l'action sous l'attribut href Pour l'exécution de l'action, onclick doit renvoyer false. Généralement, onclick="xxx();return false;" est écrit comme ceci, lorsque TABPANE est fermé dans IFRMAE, cela provoquera href. problèmes d’exécution et d’affichage des pages. La solution consiste à copier le code suivant dans le JSP à l'aide de TAB.

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;
}

href='javascript:function()'> Ceci est écrit de manière à ce que le lien ne renvoie pas à une nouvelle page et exécute à la place un morceau de code js. Cela peut avoir le même effet que onclick. De manière générale, si vous souhaitez appeler un script, vous devez écrire le code dans l'événement onclick. Il n'est pas recommandé d'utiliser href=. ' javascript:fonction()' Cette façon d'écrire est due au fait qu'une fois le code js défini dans l'attribut href, d'autres événements inutiles peuvent être déclenchés dans certains navigateurs. provoquant des effets inattendus.et L'événement onclick sera exécuté avant l'attribut href, il sera donc déclenché en premier. onclick déclenche alors href, donc si vous ne voulez pas que la page saute, vous pouvez définir Le code js dans onclick renvoie false à la fin, afin que le contenu de href ne soit pas exécuté. Dans l'application ajax, écrivez plus comme suit , pour indiquer que ce lien ne sautera pas, mais exécutera un script js.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)">

所以，比较推荐的写法是假定我们有个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();",文档中推荐这样写：<

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

但是这种方法在复杂环境有时会产生奇怪的问题，尽量不要用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);">

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

比如

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

4

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

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来实现的
。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!