3

divをネストしている状況があります。親div（onclick（）イベントがあります）と、動的に入力されているいくつかのdivがあります。'バブリング'により、onclick（）イベントがDOMを介して伝播し、すべての親でonclick（）イベントがトリガーされることを理解できます。私が行ったすべての調査では、これを防止しようとしている多くの人々が示されていますが、私はそれを機能させることができません。onclick（）を機能させる唯一の方法は、divの端の近く、おそらく子divが存在しない場所をクリックすることであり、親を直接クリックしています。

以下に該当するコードを含めました。ページにはこれらのいわゆる「ウィジェット」が9つ存在する可能性がありますが、最初の「ウィジェット」を参照する以外のすべてのコードを削除しました。

更新：JavaScript関数からすべてを引き出して、HTMLコードに直接入れようとすると、期待どおりに機能します。ただし、これを行うと、必要な機能が削除されるため、この回避策を回避するようにします。

以下に新しいフィドルがあります。これは、イベントが期待どおりにJS関数を呼び出していない場合でも、基本的に私が何をしようとしているのかを示しています。

更新＃2：コードに表示されている応答を模倣するフィドル（以下の＃5）を作成しました。フィドルを使用している場合、divの中央をクリックしてもアラートが表示されないことに気付くでしょうが、divの外側の境界の近くをクリックすると、最終的に応答が返されます。

問題が解決しました：

以下のRacheetの回答によると、この問題は解決されています。参照用に完全に機能するコードを使用して最終的なフィドルを作成しました：http： //jsfiddle.net/v3MGX/8/

JAVASCRIPT：

function initializeWidgets(){

var widget1 = "Professional";

widget1 = 
    "<div class='outer'><div class='middle'>
    <div class='inner'><h1>" + widget1 + "</h1></div></div></div>";

document.getElementById("widget1").innerHTML = widget1;
}

function hoverWidgets(widgetID){
var w = new Array();
w[0] = "Work Experience, Educational History, and Resume Download";

w[widgetID-1] = "<div class='outer'><div class='middle'>
    <div class='inner'><h2>" + w[widgetID-1] + "</h2></div></div></div>";

document.getElementById("widget"+widgetID).innerHTML = w[widgetID-1];

}

該当するHTML：

<div class="widget" id="widget1" onclick="alert(1);" onmouseover="hoverWidgets('1')"
onmouseout="initializeWidgets()"></div>

現在のフィドル：http ： //jsfiddle.net/v3MGX/5/

最終フィドル：http ： //jsfiddle.net/v3MGX/8/

4

2 に答える 2

0

私はあなたの例でかなり遊んで、問題を解決しました。これが私の解決策です：

http://jsfiddle.net/v3MGX/7/

    window.initializeWidgets = (function() {
    /*THIS SECTION IS YOUR WIDGET CONSTRUCTOR*/

    //Set up your constants for this widget
    var widget1 = "Professional";
    var widget2 = "Work Experience, Educational History, and Resume Download";

    //first you grab your old element
    var widgetSmallElement = document.getElementById("widget1");

    //then you make your new elements
    var outer = document.createElement("div");
    outer.setAttribute('class','middleSmall');
    var inner = document.createElement("div");
    inner.setAttribute('class','innerSmall');
    var heading = document.createElement("h1");
    heading.innerHTML = widget1;
    var subHeading = document.createElement("h2");
    subHeading.innerHTML = widget2;

    //now you chain the above and then add them to the document
    inner.appendChild(heading);
    outer.appendChild(inner);
    widgetSmallElement.appendChild(outer);

    //This is your new, simplified hoverWidgets handler
    window.hoverWidgets = function (widgetID) {
        inner.replaceChild(subHeading,inner.firstChild);        
    };

    /*THIS SECTION IS THE RETURN VALUE FROM YOUR CONSTRUCTOR*/
    return function() {
        //this is the function actually given to the onClick and onMouseout handler as the initializeWidgets funciton.
        inner.replaceChild(heading,inner.firstChild);
    };

})();

あなたが抱えている問題は、あなたがあなたの内部divを作成している方法に起因しています。DOMノードのinnerHTMLプロパティに文字列としてhtmlを書き込んでjavascriptでhtml要素を作成すると、そこにあった古いノードが削除され、新しいノードが作成されて置き換えられます。

その古いノードが削除されると、それに接続されていたイベントハンドラーも削除されるため、マウスオーバーを実行すると、実際にはさまざまな内部divと既存のイベントハンドラーが削除および再作成されます。このため、htmlで割り当てたonclickハンドラーは、これらの内部ノードには存在しません。

通常、innerHTMLプロパティに直接書き込んでドキュメントにhtmlを追加することはお勧めできません。

JavaScriptでネイティブにノードを作成するようにソリューションを書き直してから、initialiveWidgets関数とhoverWidgets関数を書き直して、内部div内の<h1>ノードと<h2>ノードを単純に交換しました。

クロージャの中にすべてを入れて、initializeWidgets関数とhoverWidgets関数以外のものでグローバルスコープを汚染しないようにしました。この実装は、onLoad関数のハンドラーとして登録されている場合にのみ機能します。これは、htmlがイベントハンドラーとしてアタッチしようとする前に、コンストラクター部分でこれら2つの関数を実行および作成する必要があるためです。

このソリューションがニーズに合わせて複雑であることがわかった場合でも、innerHTMLプロパティに直接書き込むのではなく、javascriptを使用してdivおよびh1 / h2タグをネイティブに作成および操作することで、独自のソリューションを作成できるはずです。

これを行う方法のガイドは次のとおりです

于 2013-03-13T16:50:18.013 に答える
0

オンクリックが何らかの形でDIVを具体的に参照していない場合は、常にonclickを他のネストされたdivに追加できます。それ以外の場合は、HTMLをさらに投稿する必要があります。

于 2013-03-13T16:24:20.007 に答える