Question

让我说我有这个简单的代码，用于通过RxJS进行拖放：

const { fromEvent } = Rx.Observable;
const target = document.querySelector('.box');

const mouseup = fromEvent(target, 'mouseup');
const mousemove = fromEvent(document, 'mousemove');
const mousedown = fromEvent(target, 'mousedown');

document.getElementById("click")
.addEventListener("click", () => {
  alert('clicked');
})

const mousedrag = mousedown.selectMany((md) => {
  const startX = md.clientX + window.scrollX,
        startY = md.clientY + window.scrollY,
        startLeft = parseInt(md.target.style.left, 10) || 0,
        startTop = parseInt(md.target.style.top, 10) || 0;
  md.preventDefault();
  return mousemove.map((mm) => {
    mm.preventDefault();
    return {
      left: startLeft + mm.clientX - startX,
      top: startTop + mm.clientY - startY
    };
  }).takeUntil(mouseup);
});

const subscription = mousedrag.subscribe((pos) => {
  target.style.top = pos.top + 'px';
  target.style.left = pos.left + 'px';
});

简单的html

<div class="box">
  <a id="click">Click test</a>
</div>

DEMO

现在，如果您单击并拖动框，则拖动它。但是如果你点击＆＃34;点击测试＆＃34;拖动它，它拖动好，但在停止拖动后，会显示警报。怎么避免这个？

preventDefault不起作用，因为我们点击了儿童。 stopPropagation也不会起作用，因为我们会停止传播，但是警告点击处理程序在盒子的子项上

Answer 1

some text some text some text New paragraph text Another new paragraph和If(c, BitVecVal(1,1), BitVecVal(0,1))是两个不同的事件。 AFAIK你无法阻止另一个。但是你可以在你的rx代码中设置一个特定的类名，并在click处理程序中对这个类进行测试。在mousedown事件中，您可以再次删除该课程。由于在click事件处理程序发生之前调用此事件，我已使用mouseup将其重新放回事件循环。如果你对如何做到这一点有更好的了解，请告诉我。

见fiddle（用RxJS 5编写）。

完整代码：

click

RxJS：使用拖放时如何防止元素点击

1 个答案: