0

任意のボタンを押して、右、左、またはダブルクリックがあるかどうかを取得できる画像を作成しようとしています。

次のように:

    <img id="myImgId" alt="" src="image.jpeg"   onmousedown="click(event)"/>
    <p><span id="click"></span></p>


<script type="text/javascript">
function click(event)
{
    if(event.button==2) 
    {
        document.getElementById("click").innerHTML="Last Action: Right Click";
        document.getElementById("click").value="Last Action: Right Click";
    }
    else if(event.button=0)
    {
        if(event.getclickcount() = 1)
        {
            document.getElementById("click").innerHTML="Last Action: Left Click";
            document.getElementById("click").value="Last Action: Left Click";
        }
        else if(event.getclickcount() = 2)
        {
            document.getElementById("click").innerHTML="Last Action: Double Click";
            document.getElementById("click").value="Last Action: Double Click";
        }
    }
}
</script>

画像をクリックすると、これが何かをするだろうと思っていました....

4

1 に答える 1

1

まず最初に、Javascriptは Java ではないことを知っておいてください。getClickCount()は、Javascript ではなく Java メソッドです。

次に、次の記事をお勧めします:マウス イベント

最後に一つだけ。getElementByIdを使用すると、HTMLElement が返されます。この要素がスパンの場合、値を設定する必要はありません。なぜなら、その innerHTML で十分だからです!

これら 3 つのイベントを確認するだけでよい場合は、同様のことができる組み込みメソッドがいくつかあります。異なるタイプのクリックと HTML の間の相互作用を示す小さなスニペットを次に示します。

HTML 部分

<img id="myImgId" alt="" src="image.jpeg" />
<p><span id="click"></span></p>

Javascript コード

var myImg = document.getElementById('myImgId'),
    clickSpan = document.getElementById('click'),
    events = {
        click: 'Left',
        contextmenu: 'Right',
        dblclick: 'Double'
    };
function changeClickSpanValue(eventType) {
    clickSpan.innerHTML = 'Last Action: ' + events[eventType] + ' Click';
}
myImg.onclick = function(event) {
    event.preventDefault();
    changeClickSpanValue('click')
};
myImg.oncontextmenu = function(event) {
    event.preventDefault();
    changeClickSpanValue('contextmenu');
}
myImg.ondblclick = function(event) {
    event.preventDefault();
    changeClickSpanValue('dblclick');
}

JSFiddleデモを見る

于 2013-05-13T16:08:41.320 に答える