我有以下 HTML( react )设置:
<div
onDragStart={
(e) => { this.bound_handleDragStart.call(this, e) }}
draggable="true"
>
<div>Stuff here</div>
<div><input .../></div>
</div>
此设置使整个外部 div 可拖动。
但是,如果拖动从输入开始,我希望取消它。
我已经尝试将 onDragStart 添加到输入,将 eventListener 添加到输入并返回 false,在句柄拖动开始时禁用传播,以及许多其他操作,但它们都不起作用。
事实上,当 event.target
返回外部 div 时,我看不出有什么方法可以确定是哪个 child 开始拖动。
我确定这可以做到并且不会太难?
我考虑过将拖动移动到所有内部 div,但我不确定这是否会解决我的问题,或者会产生一组全新的问题,而且我觉得这不是正确的方法
最佳答案
信不信由你,但实际上您需要在输入上设置 draggable="true"
,然后在您运行的输入上为 dragstart
添加事件处理程序event.preventDefault()
:
<div
onDragStart={
(e) => { this.bound_handleDragStart.call(this, e) }}
draggable="true"
>
<div>Stuff here</div>
<div><input draggable="true" onDragStart={
(e) => e.preventDefault()
}/></div>
</div>
这将阻止实际的拖动,但父级上的 dragstart
事件仍会被触发,因为它冒泡了。如果您也想阻止这种情况,您还需要调用 event.stopPropagation()
。
关于javascript - 当父元素可拖动时防止子元素被拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44048685/