拖动 div 忽略某些元素

Question

我想在网页上拖动 div，以下是我的 html。现在它拖动 div，无论我右键单击 div id draggable

var isMouseDown, initX, initY, height = draggable.offsetHeight,
  width = draggable.offsetWidth;

draggable.addEventListener('mousedown', function(e) {
  isMouseDown = true;
  document.body.classList.add('no-select');
  initX = e.offsetX;
  initY = e.offsetY;
})

document.addEventListener('mousemove', function(e) {
  if (isMouseDown) {
    var cx = e.clientX - initX,
      cy = e.clientY - initY;
    if (cx < 0) {
      cx = 0;
    }
    if (cy < 0) {
      cy = 0;
    }
    if (window.innerWidth - e.clientX + initX < width) {
      cx = window.innerWidth - width;
    }
    if (e.clientY > window.innerHeight - height + initY) {
      cy = window.innerHeight - height;
    }
    draggable.style.left = cx + 'px';
    draggable.style.top = cy + 'px';
  }
})

draggable.addEventListener('mouseup', function() {
  isMouseDown = false;
  document.body.classList.remove('no-select');
})

<div id="draggable" class="no-select">
  <div class="ignore">
    <select></select>
  </div>
  <div>Other contents</div>
</div>

如果用户在 div 类中拖动 div，我如何禁用拖动 ignore

Answer 1

只需取消class="ignore" 元素上的mousedown 事件：

var isMouseDown, initX, initY, height = draggable.offsetHeight,
        width = draggable.offsetWidth;
    
    draggable.addEventListener('mousedown', function (e) {
      // Check to see if the event originated with the class="ignore" element
      if(e.target.classList.contains("ignore")){
        // If so, cancel the event and prevent it from bubbling
        e.preventDefault();
        e.stopPropagation();
      }
    
        isMouseDown = true;
        document.body.classList.add('no-select');
        initX = e.offsetX;
        initY = e.offsetY;
    })
    
    document.addEventListener('mousemove', function (e) {
        if (isMouseDown) {
            var cx = e.clientX - initX,
                cy = e.clientY - initY;
            if (cx < 0) {
                cx = 0;
            }
            if (cy < 0) {
                cy = 0;
            }
            if (window.innerWidth - e.clientX + initX < width) {
                cx = window.innerWidth - width;
            }
            if (e.clientY > window.innerHeight - height + initY) {
                cy = window.innerHeight - height;
            }
            draggable.style.left = cx + 'px';
            draggable.style.top = cy + 'px';
        }
    })
    
    draggable.addEventListener('mouseup', function () {
        isMouseDown = false;
        document.body.classList.remove('no-select');
    })

<div id="draggable" class="no-select">
            <div class="ignore">
                <select>               
                </select>
            </div>
    
    <div>
    Other contents
    </div>
    </div>