0

アンカータグがクリックされたときにdiv要素をポップアップするスクリプトがあります

echo '<a href="javascript:void(0);" onclick="popup(\'yme-property-pop\'); loadproperties(\'open\', \''.$row['id'].'\');"><h2>' . $row['placename'] . '</h2></a>';

これはPHPスクリプトからエコーされ、FFおよびIE(9)で正常に機能しています。しかし、少なくともバージョンでは、chromeはそれを実行しません。18.0.1025.168 m

ポップアップ(分割); クリックするとイベントが発生しますが、関数が含まれているスクリプト内で関数呼び出しが完了しません。

            var width_ratio = 0.4; // If width of the element is 80%, this should be 0.2 so that the element can be centered

    function toggle(div_id) {
        var el = document.getElementById(div_id);
        if ( el.style.display == 'none' ) { el.style.display = 'block';}
        else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
                    alert(popUpDivVar);
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=0;
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2;
        window_width = window_width * width_ratio; 
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
                    alert(windowname); // THIS WORKS
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);     
    }   

そのスクリプトの最後の関数は、最初に呼び出される関数です。発射されたことを確認するためにアラートボックスを入れました。しかし、それが呼び出す次の関数(blanket_size)にアラートボックスを配置しましたが、関数の最初の行にアラートボックスがあったため、起動しませんでした。発火しませんでした。

理由がわからない。奇妙なことに、このようなものは他のブラウザでは機能しますが、Chromeでは機能しません。何か案は?

ありがとう!

編集:そして、popup()関数に渡されたパラメーター値('windowname'パラメーター)が有効である/値を持っていることも確認しました。HTMLドキュメントにあるDIVのIDが含まれており、動的に作成されることはありません。

編集2:わかりました。パラメータ値(windowname)を含むアラートボックスをpopup(windowname)関数に追加した場合にのみ、スクリプトを実行しました。しかし、そのボックスを削除すると、再び機能しなくなります。

編集3: デバッガーでエラーがまったく発生しませんでした。しかし今、私はさらに混乱しています。何度も試した結果、アラートボックスがランダムに機能しているようです。動作する場合と動作しない場合があります。

最終編集 ロジックをjQueryに変更しました。これはずっと前にやるべきだった!

    // Open property
$(".property-open-link", ".yme-propertyitem").live('click', function() { 
    $("#yme-property-pop").css({'display': 'block', 'z-index': '9999' });
    $("#blanket").css({'display': 'block', 'height', getBlanketHeight(), 'z-index': '1000' });
    loadproperties('open', $(this).closest(".yme-propertyitem").attr("id"));
});
// Close property button
$("#yme-property-close").live('click', function() { 
    $("#yme-property-pop").css('display', 'none');
    $("#blanket").css('display', 'none');
});
4

1 に答える 1

1

最初に片付けることがいくつかあります:

  1. 特に、プレーンHTMLの代わりにPHPコードをここに貼り付けた場合は、コードを操作する方法を作成すると非常に役立ちます。

  2. DOMの相互作用を処理するためにライブラリを使用していない理由はありますか?これにより、コードがより簡潔になり、クロスブラウザーコードに関して発生する可能性のあるいくつかの障害点が取り除かれます。

右、

コードがChromeで機能しない理由が少しわかりません。jsfiddleでデモを設定しましたが、正常に動作しているようです。

要素onclickの属性にイベントを添付していないことに気付くでしょう。また、そうすべきでもありません。<a/>これが問題の原因である可能性があります。

現在、jsfiddleのコードは期待どおりにアラートを出し、toggleで関連するDOMノードが見つからない場合にのみ失敗します。

ノート:

addEventListenerこの例では、クロスブラウザではありません。これは、DOMライブラリを使用するもう1つの理由です。

于 2012-05-02T20:07:16.307 に答える