單擊下拉菜單時如何防止拖動事件？

Question

我正在使用Muuri.js（ https://github.com/haltu/muuri ）來利用拖放功能，並且在網格類中放置了一個下拉菜單。

但是，每次我單擊下拉菜單時，它都會觸發拖動事件。 任何想法如何預防呢？

這是我的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>

這是我的js代碼：

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

謝謝。

Answer 1

最有可能是事件傳播問題。 可以使用event.stopPropagation();來停止event.stopPropagation(); 這樣就不會觸發拖動處理程序。

ES6

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

ES5

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