HTMLにおけるhrefタグとonclickタグの使い方の違いと優先度の例を詳しく解説

私は の href と onclick を非常にカジュアルに書いていましたが、その後、いくつかの問題が発生し、この問題に注目するようになりました。

まず、ドキュメントからの抜粋です。 Javascript の void は、式が評価されるが値を返さないことを指定する演算子です。

void 演算子の使用形式は次のとおりです。

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

expression は、評価される Javascript 標準式です。式の外側のかっこはオプションですが、記述することをお勧めします。 (実装バージョン Navigator 3.0)

void 演算子を使用してハイパーリンクを指定できます。式は評価されますが、現在のドキュメントには何もロードされません。

以下のコードはハイパーリンクを作成しますが、その後ユーザーには何も起こりません。ユーザーがリンクすると、 void(0) は 0 と評価されますが、JavaScript には影響しません。

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

以下のコードは、ユーザーがクリックしたときにフォームを送信するハイパーリンクを作成します。

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

ここにフォームを送信

次のコードは subgo() 関数を実行します。

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

ここでは、javascript:void(0) は実際には有効ではなく、関数であるだけですリンクが切れており、実行される関数は subgo() です。

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

実際、 #contains には位置情報が含まれており、デフォルトのアンカーは #top であり、これは Web ページの上部であり、javascript:void(0) は情報のないデッドリンクのみを表します。したがって、スクリプトを呼び出すときは void(0) を使用するのが最善です

。 href は一般に URL アドレスを指します。また、href="javascript:xxx();" などの JavaScript を呼び出すこともできます。ドキュメントでは次のように書くことを推奨しています。 xx のようにします。ただし、この方法は複雑な環境で奇妙な問題を引き起こすことがあります。この JavaScript は使用しないようにしてください。プロトコルを A href 属性として使用すると、window.onbeforeunload イベントが不必要にトリガーされるだけでなく、IE でアニメーション GIF イメージの再生が停止します。

リンクの onclick イベントが最初に実行され、続いて href 属性のアクション (ページ ジャンプ、または JavaScript 疑似リンク) が実行されることがわかっています。 href 属性のアクションを実行したくない場合は、 onclick は false を返す必要があります。通常、TabPane の JS ソース コードは次のように記述されます: onclick="xxx();return false;".

TabPane。 IFRMAE の場合、href の実行とページ表示に問題が発生します。解決策は、TAB を使用して次のコードを JSP にコピーすることです。

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()'> これは、リンクが新しいページにリンクせず、代わりに js コードの一部を実行するように記述されています。 onclick と同じ効果が得られる可能性があります。一般に、スクリプトを呼び出す場合は、onclick イベント内にコードを記述する必要があります。href='javascript:function」を使用することはお勧めできません。 ()' この書き方だと、href属性にjsコードを設定した後、ブラウザによっては他の不要なイベントが発生する可能性があるためです。意図しない影響を引き起こします。そして onclick イベントは href 属性の前に実行されるため、最初にトリガーされます。 onclick は href をトリガーするため、ページをジャンプさせたくない場合は、次のように設定できます。 onclick の js コードは最後に false を返すため、href 内の内容は実行されません。 ajax アプリケーションでは、さらに次のように記述します。 , このリンクはジャンプしないが、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来实现的
。

以上がHTMLにおけるhrefタグとonclickタグの使い方の違いと優先度の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。