gpt4 book ai didi

javascript - d3 发送鼠标事件到div子元素

转载 作者:行者123 更新时间:2023-11-28 07:41:11 26 4
gpt4 key购买 nike

尝试拖放 div 中包含的完整表单,问题是保留默认行为子元素的(这里的文本输入允许例如通过鼠标选择文本)并限制将start拖到div#dragme边框部分。

这里有描述 https://github.com/mbostock/d3/wiki/Drag-Behavior#on如何在拖动元素时保留一些不良行为,但我想这里相反的情况是可取的,这意味着(类似于)将事件发送到 div child 并让他们执行默认行为。

这是代码,请尝试通过鼠标选择文本(或通过双击选择整个文本),它不会工作:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
<html>
<head>
<style>
div#dragme {
position: absolute;
overflow: hidden;
left: 20;
top: 20;
width: auto;
background: silver;
border: 15px solid rgba(0,0,0,0.5);
border-radius: 4px; padding: 8px;
}
</style>
</head>
<script src="d3.js"></script>

<div id="container" onclick="mouseclick(event)" >
</div>

<script>
elem = document.createElement("div");
elem.id = 'content';
elem.innerHTML = '<div draggable="true" id="dragme" class="resizeable"><input type="text" value="my text" /> </div>';
document.body.insertBefore(elem,document.body.childNodes[0]);

function move(){
console.log("target: "+ d3.event.target);
var dragTarget = d3.select(this);
dragTarget
.style("left", function(){return d3.event.dx + parseInt(dragTarget.style("left"))})
.style("top", function(){return d3.event.dy + parseInt(dragTarget.style("top"))});
};

var node_drag = d3.behavior.drag()
.on("drag", move);
var nodes = d3.selectAll("#dragme");
nodes.call(node_drag);
</script>
</body>
</html>

最佳答案

我最近通过在文本区域上添加鼠标悬停/鼠标悬停处理程序来关闭和打开父 div 的拖动行为,解决了类似的问题,例如:

        var e = elem.find('textarea');
e.on('mouseover', function(){ elem.draggable('destroy') });
e.on('mouseout', function(){ elem.draggable() });

关于javascript - d3 发送鼠标事件到div子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28000211/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com