Javascript 如何防止单击下拉列表时发生拖动事件？

我使用Muuri.js（）来利用拖放功能，并在grid类中放置了一个下拉列表

但是，每次单击下拉列表时，它都会触发拖动事件。 有什么办法可以预防吗

这是我的html代码：

<div class="row mh grid">
    <div class="col-sm-6 itemgrid" id="div-1">
        <div class="card">
            <div class="panel-white">
                <h3 class="panel-title" style="display:inline-block;">Chart 1</h3>
                <select ng-change="changeChartType(selectedType)" ng-model="selectedType" >
                    <option ng-repeat="t in chartType" value={{t.type}}>{{t.dispName}}</option>
                </select>
            </div>
            <div class="card-content">
                <canvas id="pie" class="chart chart-pie" chart-type="selectedType" chart-data="data1" chart-labels="labels1"  chart-options="options" width="600" height="200" chart-colors="colors" style="cursor: default;"></canvas>
            </div>
        </div>
    </div>
</div>

---

谢谢。

这很可能是您的问题。可以使用停止，以便不会触发拖动处理程序

ES6 ES5

var cardropdowns=document.querySelectorAll（'.card select'）；
对于（变量i=0；i

var grid = new Muuri('.grid', {
        dragEnabled: true
    });

let cardDropdowns = document.querySelectorAll('.card select');
for (let dropdown of cardDropdowns) {
    dropdown.addEventListener('click', evt => {
        evt.stopPropagation();
    }
}

var cardDropdowns = document.querySelectorAll('.card select');
for (var i = 0; i < cardDropdowns.length; i++) {
    cardDropdowns[i].addEventListener('click', function(evt) {
        evt.stopPropagation();
    });
}