动态将选择元素添加到div，mousedown事件可防止下拉菜单打开

Question

有一个DIV元素（标识：容器），其中附加了mousedown事件处理程序。 然后，我使用document.createElement（...）和append（...）将select元素添加到其中。 问题是，当我单击选择元素的箭头时，下拉列表没有打开。 请注意，容器元素是现有网页/ crm的一部分。 无法修改。

// container:
$("#container").on('mousedown.something', function (event) {
    event.preventDefault();
    // some other code
});

// append a select to the container
var numbers = ["Numbers", "1", "2", "3"];

           var list = document.createElement('select');

           list.setAttribute("id", "dropdown");
           for (var i = 0; i < numbers.length; i++) {
               var opt = document.createElement('option');
               opt.innerHTML = numbers[i];
               opt.value = numbers[i];
               list.appendChild(opt);
           }
$('#container').append(list);

jsfiddle： https ://jsfiddle.net/tomsx/8tLjcgbh/

Answer 1

您可以在select mousedown事件时使用e.stopPropagation()

 $("#container").on('mousedown.something', function(event) { event.preventDefault(); console.log('MouseDown'); // some other code }); var numbers = ["Numbers", "1", "2", "3"]; var list = document.createElement('select'); list.setAttribute("id", "dropdown"); for (var i = 0; i < numbers.length; i++) { var opt = document.createElement('option'); opt.innerHTML = numbers[i]; opt.value = numbers[i]; list.appendChild(opt); } $('#container').append(list); //stop the container mousedown from the created select $('#container').on('mousedown' , '> select' , function(e){ e.stopPropagation(); }); 

 #container { width: 200px; margin: auto; border: 3px solid #73AD21; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="container">Click me</div> 

Answer 2

您的事件也会在select上触发（属于容器的一部分），因此仅当在容器元素上单击时才需要触发mousedown

 $("#container").on('mousedown.something', function(event) {   
 if($(event.target).is('#container')) {
        event.preventDefault();
   // some other code
}
});

Answer 3

参考： https : //developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

• 被动：布尔值，如果为true，则表示侦听器指定的函数将永远不会调用preventDefault（）。 如果被动侦听器确实调用了preventDefault（），则用户代理将不执行任何操作，只生成控制台警告。 请参阅使用被动侦听器提高滚动性能以了解更多信息。

所以你需要在addEventlistener中设置被动：true

var numbers = ["Numbers", "1", "2", "3"];
var list = document.createElement('select');
list.setAttribute("id", "dropdown");
for (var i = 0; i < numbers.length; i++) {
    var opt = document.createElement('option');
    opt.innerHTML = numbers[i];
    opt.value = numbers[i];
    list.appendChild(opt);
}
$('#container').append(list);
$("#container").on('mousedown.something', function (event) {
   event.preventDefault();
    // some other code
},{passive:true});