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 Propagation很可能是一个问题。可以使用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();
    });
}

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

1 个答案:

ES6

ES5