多次点击监听器 - javascript

Question

我正在开发一个项目，该文件从文件myjs.js中导入一些javascript规则，该文件在标题中被调用（在项目的所有网页上）。 此文件管理复选框的行为，实际上切换每个复选框对的检查。问题是，在某些情况下，这种行为是错误的，但我无法更改此js文件中的任何内容，因为它太复杂了。 因此，在某些页面上，我决定在某个复选框上侦听click事件来纠正行为：问题是脚本存在冲突，我无法触发我的脚本（放在这个页面上）。如何强制它首先使我的java脚本被监听？

实际上，复选框由myjs.js构建，适用于html sequece

<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);
}

Answer 1

请在此处查看jquery stopImmediatePropagation()功能：http://docs.jquery.com/Types/Event#event.stopImmediatePropagation.28.29

我相信这会实现您的目标。

编辑：通过更多细节，我可以提供更好的答案。

编辑2：似乎在Javascript中无法保证执行顺序，因此在动态添加代码之前，内联代码可能无法运行。此外，只有使用jQuery添加其他处理程序时，此特定函数才有效。

编辑3：

快速而肮脏的修复方法是添加

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

到一个html文件的顶部。

然后编辑javascript文件，使事件处理程序具有

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

作为身体

这会在html文件中添加一行，需要区别对待，不应影响其他页面的执行。

请注意，这是一个快速而肮脏的修复方法，并且有更好的方法来执行此操作。使用现有.js文件的约束，只有一个需要区别对待的文件，这似乎是达到预期结果的最快/最简单的方法，不一定是最好的。