Question

我有一个SELECT元素，我用下拉列表替换。我已经成功地从SELECT和子OPTION元素创建了下拉列表，但我需要添加一个click事件。

此点击事件将如此：

如果单击LI，也请单击相应的OPTION。

这是因为Woocommerce必须有一些JS或PHP工作，根据选项，它显示库存状态和可变数量。因此，我假设click事件还将OPTION值绑定到表单以添加到购物车。

我有这个JS代码：

window.onload = main;
function main(){ 
var select = document.querySelector('.turnintodropdown');
var selsOpts = document.querySelector('.turnintodropdown option');
var selsLi = document.querySelector('.selectOption');
var trigger = document.createElement('a');
var openDropdown = 'dropdownVisible';
var closeDropdown = 'dropdownHidden';

(function addDropdown() {
    if(select) {
        var selsCon = document.createElement('div');
        var selsOuter = document.createElement('ul');
        selsCon.classList.add('selectContainer');
        selsOuter.classList.add('selectOuter');
        select.parentNode.insertBefore(selsCon, select);
        selsCon.appendChild(selsOuter);
        for(var i=0; i<select.length; i++) {
            if(select.childNodes[i].classList.contains('enabled') || select.childNodes[i].innerHTML == '- -'){ // Select First Child and <option> Tags with Enabled Class

                // Create New Elements
                var optsNew = document.createElement('li');
                optsNew.innerHTML = select.childNodes[i].text;
                optsNew.classList.add('selectOption');

                // Set Attributes to New Elements
                if(optsNew.innerHTML !== '- -') {
                    optsNew.setAttribute('value', select.childNodes[i].text);
                }
                else {
                    void(0);
                }

                optsNew.click(clickFunc);

                // Add New LI <option> to UL <container>
                selsOuter.appendChild(optsNew);

                // Click Events
                console.log(select.firstChild);
            }
        }
        var clickFunc = function() {
            select.click();
        };
        select.style.display = 'none';

    }

})();
}

非常感谢任何帮助。

此致迈克尔

Answer 1

我有点长的回答，抱歉。

该函数最初取自this webpage而未修改，它应该适用于大多数旧浏览器。我实际上已经测试了Firefox / Chrome / Opera / Edge的最新版本。

处理所有类型事件的版本更复杂，因为您必须为标准事件创建案例以按类型处理它们（并非所有事件都是MouseEvents）。

它还支持内联函数，html标记中包含onclick=，也适用于使用jQuery设置的事件。

请注意，如果您希望获得旧版broswers的相同支持，则您必须区分用于设置事件的案例，所有人都不支持现代addEventListener。

function fireClick(node){
    if ( document.createEvent ) {
        var evt = document.createEvent('MouseEvents');
        evt.initEvent('click', true, false);
        node.dispatchEvent(evt);    
    } else if( document.createEventObject ) {
        node.fireEvent('onclick') ; 
    } else if (typeof node.onclick == 'function' ) {
        node.onclick(); 
    }
}

这样使用：

fireClick(document.getElementById("myId"));

使用Vanilla Javascript模拟Click

1 个答案: