私は の 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('href event');" onclick="clickevent(this);">
3 优先触发的方法如果返回 false 导致后一个事件不被触发
比如
<a href="javascript:alert('href event');" onclick="clickevent(this); return false;">
4
以上がHTMLにおけるhrefタグとonclickタグの使い方の違いと優先度の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

Dreamweaver Mac版
ビジュアル Web 開発ツール

ホットトピック









