2

つまり、ユーザーがクリックできるようにする大きなボックスがあります。クリックすると、特定の URL に移動します。だから... リンク。

(このボックスには、対応する HREF へのリンクが含まれていますが、ボックス全体をクリックできるようにしたい)

いくつかの理由により、実際のアンカーをボックスと同じ大きさにすることは、HTML レイアウトにとって非常に面倒です。また、そのボックス内にブロックがたくさんあるなどの理由で、代替手段を見つけようとしています。

今、私がやっていることは次のとおりです。

$(box).click(function(){
  window.location.href = $(this).find("a.lnkWhatever").attr("href");
});

どちらが機能します...ちょっと...しかし、それは完全なリンクではありません.Ctrlキーを押しながらクリックして新しいタブで開くことはできません.右クリックしても、リンクで得られる便利なオプションが得られません.. .

クリックしたときに Ctrl が押されているかどうかを確認することはできますが、奇妙な方法でうまく機能しない嫌悪感が常にあると感じています...

私が見逃しているこれを行うためのより良い方法はありますか?

注: リンクを大きなボックスにスタイル設定できることはわかっています。通常はそうしますが、この場合は非常に問題があるため、そうする必要はありません。

ありがとうございました！
ダニエル

4

4 に答える 4

1

いつでもa要素をボックスにすることができます。css を使用してブロックを表示します。これは JSFiddle のデモです。

注: デモをクリックするだけでは、コードのように Google はロードされません。JSFiddle はここで奇妙なことをしますが、Ctrl + クリックすると期待どおりに動作します。

また！（このようにすることに問題があるとあなたが言ったので）

clickおよびイベントをキャプチャし、contextmenuどのイベントがトリガーされたかを把握し、それに基づいてアクションを変更できます。この demoのようなコードでこれを実現できます。

アンカーにアタッチする JavaScript は次のようになります。

$('a').on('click contextmenu', function (event) {
    if (event.type === 'contextmenu') {
        //execute what code you want
    }
    else {
        // this would automatically navigate to your link
        // so you could theoretically leave off the else portion
        // it just seemed like a nice place to leave this explanation
    }
});​
于 2012-09-20T16:09:40.530 に答える
0

このようなものを試すことができます。

JS

$(document).ready(function() {
    $('#mydiv').click(function(e) {
        var a = $(this).find('a');
        if (e.ctrlKey) {
            a.attr('target', '_blank');
        }
        a[0].click();
    });
})​

HTML

<div id='mydiv'>
        hi world <br />
        <a href='http://www.google.com'>Google</a>
        Hello <br />
        blah
    </div>​

デモ

ただし、.click()クロスブラウザかどうかはわかりません。さまざまなブラウザを考慮する必要がある場合があります

于 2012-09-20T16:35:15.630 に答える
0

内側のアンカーで設定してみてください：

display: block; 
width: 100%;
height: 100%;

position: relative;おそらく、親コンテナにも設定する必要があるかもしれません

JsFiddleを参照してください

于 2015-04-30T11:42:39.030 に答える
0

ボックスが相対的に配置されている場合は、div 内の最初の要素として絶対配置アンカーを作成し、サイズを 100% にすることができます。例

編集 - リンクを修正

于 2012-09-20T16:16:50.743 に答える