1

だから私は構築しているWebアプリを持っており、サーバーから生成されたhtmlを投稿用に受け取り、それを本文に配置します。私の質問は: そのメッセージ内のタグのデフォルトの onclick 動作を設定する方法はありますか? HTMLを解析して各タグの動作を設定するのは避けたいと思います。私は脳のおならをしているだけかもしれませんが、尋ねるだけで最善だと感じました. この背後にある目標は、カードを切り替えて画像を全画面表示できるようにすることです。クリック動作を設定する方法がわかりません。前もって感謝します。

4

5 に答える 5

3

ほとんどの js ライブラリにはバインディング サービス関数があります...

extJSでは明らかに

Ext.select('img').on('click', function);

「img」の代わりに css セレクターを使用すると、特定のクラス、特定の ID、または実際に好きなもので画像を作成できます。

ドキュメンテーション

于 2012-09-12T17:59:35.750 に答える
1

これはさまざまな方法で実行できますが、クリックイベントを追加する画像が中央の要素に保存されている場合は、その要素を（document.getElementByTagName、byId、byClassNameなどを介して）取得すると、次のように実行できます。

// Create a few variables to help us out
var index = 0,
    imgs = centerEle.getElementsByTagName("img"),
    eventType = "addEventListener", // Default event listener function
    eventPrefix = ""; // default prefix for event names

// IE event model support:
if (!document.hasOwnProperty("addEventListener")) {
    eventType = "attachEvent";
    eventPrefix = "on";
}

// Loop through images in the central element
for (var a = 0; a < imgs.length; a += 1) {
    /* if you wanted to exclude certain iamges:
    if (img[a].src !== "http://somesite.com/img.jpg" && 
        img[a].src !== "http://somesite.com/img2.jpg") { */

    img[a][eventType](eventPrefix + "click",function(evnt) {
        // 'this' is the img
        // evnt is the event that was raised
        // everything within this function will be called when the image is clicked
    });
    // }
}

いくつかの注意：

簡単な方法をとる代わりに、これの代わりにイベントリスナーを使用しました。onclickこれは、要素にすでにonclickイベントが指定されている場合、後で指定されonclickたプロパティが前のプロパティを上書きするためです。

イベントプロパティの代わりにイベントリスナーを使用することに加えて、IEサポートを含めました。eventTypeこれが、とeventPrefix変数を含めた理由です

于 2012-09-12T18:19:43.597 に答える
1

これを行うには、ExtJSコンポーネントを使用できます。任意の数のExtコンポーネントがこのように機能しますが、必要なのは基本コンポーネントだけです。

サーバーがhtmlデータを返したら、コンポーネントのupdateメソッドを使用します。コンポーネントのhtml要素のクリックイベントにバインドすると、コンポーネント内でクリックされたhtml要素がクリックイベントを発生させます。イベントにバインドされた関数内で、イベントオブジェクトが使用可能になり、クリックされた内容が通知されます。

    Ext.onReady(function() {
        var htmlContainer,
            htmlFromServer;

        /*
         * you can create a component that will be 
         * be used to set the html into the page
         * while allowing it to be managed from Ext JS
         */
        htmlContainer = Ext.create('Ext.Component', {
            renderTo: Ext.getBody(),
            width: 400,
            height: 400
        });

        /*
         * this would be html from your service call
         * this is just a simplified example
         */
        htmlFromServer = '<div>Click this Div and this will be the event target. Click the image and that will be the value of the event target.</div><img src="http://www.sencha.com/img/apple-touch-icon.png" /><span>And this is some span-wrapped content.</span>';

        /* update the component with the html you want it to contain */
        htmlContainer.update(htmlFromServer);

        /* bind to the click event of the components html element */
        htmlContainer.getEl().on('click', function (event) { console.log('event object and html element that was clicked:', event, event.target)});

    });​
于 2012-09-12T23:54:15.100 に答える
0

jquery セレクターを使用または使用して、ページ内のすべての IMG を取得し、document.getElementsByTagName("IMG")デフォルトのクリック ハンドラーをonclick各 IMG 要素のイベントに関連付けることができます。(jquery でそれを行う方法の正確な構文については、マニュアルを参照できます)。

于 2012-09-12T17:56:43.463 に答える
0

これが、jQuery の.live()( < jq 1.7 ) および.on()( >= jq 1.7 ) メソッドの目的だと思います。これを使用して、バインド時に存在しない要素にイベントをバインドできます。

于 2012-09-12T18:55:06.597 に答える