2

私は、ヘッダーで（プロジェクトのすべてのWebページで）呼び出されるファイルmyjs.jsからいくつかのJavaScriptルールをインポートするプロジェクトに取り組んでいます。このファイルは、チェックボックスの動作を管理し、実際にはすべてのチェックボックスペアのチェックを切り替えます。問題は、場合によっては、この動作が間違っていることですが、このjsファイルは複雑すぎるため、何も変更できません。そのため、一部のページで、動作を修正するためにいくつかのチェックボックスのクリックイベントをリッスンすることにしました。問題は、スクリプトの競合があり、スクリプトをトリガーできないことです（このページに配置します）。Javaスクリプトを最初にリッスンさせるにはどうすればよいですか？

実際、チェックボックスはmyjs.jsによって作成され、htmlの続編に適用されます

<div class="left">
          <input type="radio" name="isPubOk" id="pubOk" checked="checked" />
           <label for="pubOk"><?php echo _("Oui"); ?></label>
</div>
<div class="left">
          <input type ="radio" name="isPubNok" id="pubNok" checked="" />
          <label for="pubNok"><?php echo _("Non"); ?></label>
</div>

これがjsファイルのサンプルです：

function initCustomForms() {
    getElements();
    separateElements();
    replaceRadios();
    replaceCheckboxes();
    replaceSelects();
    // hide drop when scrolling or resizing window
    if (window.addEventListener) {
        window.addEventListener("scroll", hideActiveSelectDrop, false);
        window.addEventListener("resize", hideActiveSelectDrop, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("onscroll", hideActiveSelectDrop);
        window.attachEvent("onresize", hideActiveSelectDrop);
    }
}

function refreshCustomForms() {
    // remove prevously created elements
    if(window.inputs) {
        for(var i = 0; i < checkboxes.length; i++) {
            if(checkboxes[i].checked) {checkboxes[i]._ca.className = "checkboxAreaChecked";}
            else {checkboxes[i]._ca.className = "checkboxArea";}
        }
        for(var i = 0; i < radios.length; i++) {
            if(radios[i].checked) {radios[i]._ra.className = "radioAreaChecked";}
            else {radios[i]._ra.className = "radioArea";}
        }
        for(var i = 0; i < selects.length; i++) {
            var newText = document.createElement('div');
            if (selects[i].options[selects[i].selectedIndex].title.indexOf('image') != -1) {
                newText.innerHTML = '<img src="'+selects[i].options[selects[i].selectedIndex].title+'" alt="" />';
                newText.innerHTML += '<span>'+selects[i].options[selects[i].selectedIndex].text+'</span>';
            } else {
                newText.innerHTML = selects[i].options[selects[i].selectedIndex].text;
            }
            document.getElementById("mySelectText"+i).innerHTML = newText.innerHTML;
        }
    }
}

// getting all the required elements
function getElements() {
    // remove prevously created elements
    if(window.inputs) {
        for(var i = 0; i < inputs.length; i++) {
            inputs[i].className = inputs[i].className.replace('outtaHere','');
            if(inputs[i]._ca) inputs[i]._ca.parentNode.removeChild(inputs[i]._ca);
            else if(inputs[i]._ra) inputs[i]._ra.parentNode.removeChild(inputs[i]._ra);
        }
        for(i = 0; i < selects.length; i++) {
            selects[i].replaced = null;
            selects[i].className = selects[i].className.replace('outtaHere','');
            selects[i]._optionsDiv._parent.parentNode.removeChild(selects[i]._optionsDiv._parent);
            selects[i]._optionsDiv.parentNode.removeChild(selects[i]._optionsDiv);
        }
    }

    // reset state
    inputs = new Array();
    selects = new Array();
    labels = new Array();
    radios = new Array();
    radioLabels = new Array();
    checkboxes = new Array();
    checkboxLabels = new Array();
    for (var nf = 0; nf < document.getElementsByTagName("form").length; nf++) {
        if(document.forms[nf].className.indexOf("default") < 0) {
            for(var nfi = 0; nfi < document.forms[nf].getElementsByTagName("input").length; nfi++) {inputs.push(document.forms[nf].getElementsByTagName("input")[nfi]);
            }
            for(var nfl = 0; nfl < document.forms[nf].getElementsByTagName("label").length; nfl++) {labels.push(document.forms[nf].getElementsByTagName("label")[nfl]);}
            for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName("select").length; nfs++) {selects.push(document.forms[nf].getElementsByTagName("select")[nfs]);}
        }
    }
}

// separating all the elements in their respective arrays
function separateElements() {

    var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;
    for (var q = 0; q < inputs.length; q++) {
        if(inputs[q].type == "radio") {
            radios[r] = inputs[q]; ++r;
            for(var w = 0; w < labels.length; w++) {
                if((inputs[q].id) && labels[w].htmlFor == inputs[q].id)
                {
                    radioLabels[rl] = labels[w];
                    ++rl;
                }
            }
        }
        if(inputs[q].type == "checkbox") {
            checkboxes[c] = inputs[q]; ++c;
            for(var w = 0; w < labels.length; w++) {
                if((inputs[q].id) && (labels[w].htmlFor == inputs[q].id))
                {
                    checkboxLabels[cl] = labels[w];
                    ++cl;
                }
            }
        }
    }
}

//replacing radio buttons
function replaceRadios() {


    for (var q = 0; q < radios.length; q++) {

        radios[q].className += " outtaHere";
        var radioArea = document.createElement("div");
        if(radios[q].checked) {
            radioArea.className = "radioAreaChecked";
        }
        else
        {
            radioArea.className = "radioArea";
        }
        radioArea.id = "myRadio" + q;
        radios[q].parentNode.insertBefore(radioArea, radios[q]);
        radios[q]._ra = radioArea;

        radioArea.onclick = new Function('rechangeRadios('+q+')');
        if (radioLabels[q]) {
            if(radios[q].checked) {
                radioLabels[q].className += "radioAreaCheckedLabel";
            }
            radioLabels[q].onclick = new Function('rechangeRadios('+q+')');
        }
    }
    return true;
}

//checking radios
function checkRadios(who) {
    var what = radios[who]._ra;
    for(var q = 0; q < radios.length; q++) {
        if((radios[q]._ra.className == "radioAreaChecked") && (radios[q]._ra.nextSibling.name == radios[who].name))
        {
            radios[q]._ra.className = "radioArea";
        }
    }
    what.className = "radioAreaChecked";
}

//changing radios
function changeRadios(who) {
    if(radios[who].checked) {
        for(var q = 0; q < radios.length; q++) {
            if(radios[q].name == radios[who].name) {
                radios[q].checked = false;
            }
            radios[who].checked = true;
            checkRadios(who);
        }
    }
}

//rechanging radios
function rechangeRadios(who) {
    if(!radios[who].checked) {
        for(var q = 0; q < radios.length; q++) {
            if(radios[q].name == radios[who].name) {
                radios[q].checked = false;
            }
            if(radioLabels[q]) {
                radioLabels[q].className = radioLabels[q].className.replace("radioAreaCheckedLabel","");
            }
        }
        radios[who].checked = true;
        if(radioLabels[who] && radioLabels[who].className.indexOf("radioAreaCheckedLabel") < 0) {
            radioLabels[who].className += " radioAreaCheckedLabel";
        }
        checkRadios(who);

        if(window.$ && window.$.fn) {
            $(radios[who]).trigger('change');
        }
    }
}

//replacing checkboxes
function replaceCheckboxes() {
  if (replaceCheckBoxes == 0)
    return;
    for (var q = 0; q < checkboxes.length; q++) {
        // checkboxes[q].className += " outtaHere";
        var checkboxArea = document.createElement("div");
        if(checkboxes[q].checked) {
            checkboxArea.className = "checkboxAreaChecked";
            if(checkboxLabels[q]) {
                checkboxLabels[q].className += " checkboxAreaCheckedLabel"
            }
        }
        else {
            checkboxArea.className = "checkboxArea";
        }
        checkboxArea.id = "myCheckbox" + q;
        checkboxes[q].parentNode.insertBefore(checkboxArea, checkboxes[q]);
        checkboxes[q]._ca = checkboxArea;
        checkboxArea.onclick = new Function('rechangeCheckboxes('+q+')');
        if (checkboxLabels[q]) {
            checkboxLabels[q].onclick = new Function('changeCheckboxes('+q+')');
        }
        checkboxes[q].onkeydown = checkEvent;
    }
    return true;
}

//checking checkboxes
function checkCheckboxes(who, action) {
    var what = checkboxes[who]._ca;
    if(action == true) {
        what.className = "checkboxAreaChecked";
        what.checked = true;
    }
    if(action == false) {
        what.className = "checkboxArea";
        what.checked = false;
    }
    if(checkboxLabels[who]) {
        if(checkboxes[who].checked) {
            if(checkboxLabels[who].className.indexOf("checkboxAreaCheckedLabel") < 0) {
                checkboxLabels[who].className += " checkboxAreaCheckedLabel";
            }
        } else {
            checkboxLabels[who].className = checkboxLabels[who].className.replace("checkboxAreaCheckedLabel", "");
        }
    }

}

//changing checkboxes
function changeCheckboxes(who) {
    setTimeout(function(){
        if(checkboxes[who].checked) {
            checkCheckboxes(who, true);
        } else {
            checkCheckboxes(who, false);
        }
    },10);
}
4

1 に答える 1

2

ここでjquerystopImmediatePropagation()関数を参照してください：http：//docs.jquery.com/Types/Event#event.stopImmediatePropagation.28.29

私はこれがあなたがやろうとしていることを達成すると信じています。

編集：より詳細に、私はより良い答えを提供することができるかもしれません。

編集2：Javascriptでの実行順序は保証されていないようです。そのため、動的に追加されたコードの前にインラインコードが実行されない場合があります。さらに、この特定の関数は、他のハンドラーがjQueryを使用して追加された場合にのみ機能する可能性があります。

編集3：

迅速で汚い修正は追加することです

<script type="text/javascript">var executeHandlers = false;</script>

1つのhtmlファイルの先頭に。

次に、イベントハンドラーが持つようにjavascriptファイルを編集します

if (executeHandlers !== false) { ... do the logic you normally would here ... }

体として

これにより、別の方法で処理する必要があるhtmlファイルに1行が追加され、他のページでの実行に影響を与えることはありません。

これは迅速で汚い修正であり、これを行うためのより良い方法があることに注意してください。既存の.jsファイルの制約を処理し、異なる方法で処理する必要があるファイルは1つだけであるため、これは目的の結果を得る最も速くて簡単な方法のようですが、必ずしも最良ではありません。

于 2012-11-19T19:07:53.313 に答える