3

jquery を使用してキャンバス ID にアクセスできません。

jQuery ライブラリを追加しました。しかし、キャンバス ID をクリックしてもアラートを受け取ることができません。

しかし、JavaScriptは正常に機能しています。

    <script>
    $(document).ready(function(){
    $('#sq').click(function(){
    alert('test');
    });
    });
    </script>
    <canvas id="example" width="260" height="200">
        <h2>Shapes</h2>
      <p>A rectangle with a black border. In the background is a pink circle. Partially overlaying the 
      <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. 
      Partially overlaying the circle is a green 
      <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();" id="sq">square</a> 
      and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, 
      both of which are semi-opaque, so the full circle can be seen underneath.</p>
    </canvas>​
4

3 に答える 3

3

canvas要素内に配置したものはすべてフォールバック コンテンツです。最新のブラウザでは使用されないため、アクセスできず、クリックすることもできません。

最新のブラウザーでの の正しい使用法は、canvasその を使用して描画することcontextです。

MDNから:

< canvas > 要素は、スクリプト (通常は JavaScript) を介してグラフィックを描画するために使用できる HTML 要素です。たとえば、グラフの描画、写真の合成、アニメーションの作成、さらにはリアルタイムのビデオ処理にも使用できます。

のクリックをキャッチしたい場合はcanvas、

$('#example').click(function(){ // <-- use the id of the canvas
    alert('test');
});
于 2012-11-08T10:48:21.063 に答える
1

canvas タグ内に html 要素を配置することは想定されていません。キャンバスのアイデアは、コード (別名 javascript) を使用して描画することです。あなたがしていることはうまくいきません (または、ブラウザがキャンバスをサポートしていない場合にのみ表示される可能性が高くなります。つまり、非常に古いブラウザを意味します) :)

于 2012-11-08T10:48:27.380 に答える
1

キャンバスから html 要素を取り出し、次のように変更$('#sq').click(function(){します。$('#example').click(function(){

これを見てください： http://jsfiddle.net/Zprb4/

于 2012-11-08T10:50:21.810 に答える