1

javascriptトリガーとして機能する画像を作成するには、かなりの数のオプションがあります。

（編集：質問を単純化するためにインラインCSSとJavaScriptを使用）

アンカータグの画像：

<a href="#" onclick="myFunc();"><img src="pic.jpg" /></a>

プロパティを持つImgタグ：

<img style="cursor:pointer" onclick="myFunc();" />

プロパティを持つアンカータグ：

<a href="#" onclick="myFunc();" style="background:url('pic.jpg');"></a>

おそらく他の人も。これを続行するための（コンベンション|ベストプラクティス|広く受け入れられている|フェイルセーフ）方法はありますか？

小さな画像を特定のJavascriptまたはAJAXを実行するためのボタンとして機能させたい。

ところで、私はこれを見ましたが、それは私が探しているものではありません、彼はリンクではなくヘッダー要素について話します。

関連：JavaScriptリンクに使用する「href」値「＃」または「javascript：void（0）」はどれですか？

4

5 に答える 5

3

onclickイベントの使用方法に関する規則はありません。

ただし、インラインJavaScriptは使用しないでください。2012年のように、多くのjavascriptフレームワークがあなたの生活を楽にしてくれます。

javascriptライブラリ（ jQueryなど）に移動する場合に最適です。

<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
    $(document).ready(function(){
        $('#myPicture').on('click', function(){
            alert('image clicked');
        });
    });
</script>

またはプレーンJavaScript：

<img src="pic.jpg" id="myPicture" />
<script type="text/javascript">
    window.onload = function(){
        document.getElementById('myPicture').onclick = function(){
            alert('image clicked');
        };
    };
</script>
于 2012-09-20T10:08:32.190 に答える
2

もし私があなただったら、いくつかの変更を加えてあなたの最初の選択に固執するでしょう

<a href="javascript:void(0);" onclick="myFunc();"><img src="pic.jpg" border="0" /></a>

その理由は以下のとおりです。

  • href = "＃"は、myFuncが失敗した場合でもクリックスルーを許可します
  • javascript：void（0）はクリックスルーを許可しません
  • javascript：void（0）はクロスブラウザです
  • javascript：void（0）は、基本的な暗黙のアンカータグの動作を引き続き許可します
  • 画像タグの属性/プロパティはほとんどのブラウザで認識されますが、一部の古いバージョンのIEはそれを好まない場合があります
  • あなた次第の背景画像を使用したいが、それは高さ/幅を制御するための追加のCSSを意味する場合

さらに、jQueryまたはその他のライブラリを使用している場合は、

$(document).on('ready, function() { $('#myAnchorId').on('click', myFunc); });

HTMLプロップを介して行う代わりに...ユーザーがJavaScriptをオフにしている場合に備えて

于 2012-09-20T10:11:57.407 に答える
1

画像をトリガーとしてのみ使用する場合は、2番目のオプションを使用してください...

同じことでもう少し使用する場合は、スパンを使用して...

<span onclick="myFunc();" >
    <img src="pic.jpg" style="cursor:pointer" />
    if you click the image, or this text, the javascript function will be triggerd....
</span>
于 2012-09-20T10:06:29.440 に答える
1

多分jQueryで？あなたのHTML：

<img id="pic" src="pic.jpg" />

このjQueryで：

$('#pic').click(function() {
    // Your stuff here
});

そしてこのCSS：

#pic {
    cursor: pointer;
}

インラインcssとjsは決して最良の方法ではありません。:)

于 2012-09-20T10:11:06.563 に答える
0

クラスを使用してトリガーオブジェクト（アンカーまたは画像）を識別し、そのオブジェクトに対してクリック処理を実行します。

クラス名が「clickTrigger」であるとすると、HTMLは次のようになります。

<a href="#" style="background:url('pic.jpg');" class="clickTrigger"></a>

また

<a href="#" class="clickTrigger"><img src="pic.jpg" /></a>

また

<img style="cursor:pointer" class="clickTrigger" />

次に、javascript / jQueryを使用して、クリックイベントにアタッチします。

Javascript：

var element = this.getElementsByClassName('clickTrigger')[0];
element.onclick = function (event) {
    // handler
}

jQuery：

$('.clickTrigger').click(function (event) {
    // Handler
});
于 2012-09-20T10:10:34.813 に答える