如何防止 d3.drag().on('end' 触发 .on('click'

2024-01-18

我有一个 svg 元素,我希望能够单独单击和拖动。据我所知在 D3 中,单击会触发“拖动结束”事件(也可能拖启动?)。在下面的代码中,只需单击圆圈即可为其显示红色轮廓:

var svg = d3.select('body').append('svg');
var g = svg.append('g');

var c = g.append('circle').attr('r', 20).attr('cx', 25).attr('cy', 25)
         .call(d3.drag().on('drag', dragged).on('end', end))
         .on('click', clicked);

function dragged() {
    d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
}

function end() {
    d3.select(this).attr('fill', 'red').attr('stroke', 'red').attr('stroke-width', 5);
}

function clicked() {
    if (d3.event.defaultPrevented) return;
    d3.select(this).attr('fill', 'blue');
}

fiddle https://jsfiddle.net/hj21t40n/7/

如何注册点击回调而不触发drag.end回调?

似乎大多数有关单击和拖动的问题和块似乎都想抑制拖动时的单击操作,因此不相关。


  • d3v5.7(当前)

由于 mouseup 指示单击完成和拖动结束,您可以跳过单击事件并简单地添加一些逻辑来确定是否发生拖动:

// track action:
var wasMoved = false;

// Drag event:
function dragged() {
    d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
    wasMoved = true; // or alternatively, measure the change in distance.
}

// Mouse up event: drag end & click:
function end() {
  if(wasMoved) {
  // It was a drag:
        d3.select(this).attr('fill', 'red').attr('stroke', 'red').attr('stroke-width', 5);
  }
  // Otherwise it was a click:
  else {
    d3.select(this).attr('fill', 'blue');
  }
  wasMoved = false; // reset for next drag.
}

现在我们只能在鼠标松开时触发一项操作:拖动结束或单击时我们想要的操作:

var svg = d3.select('body').append('svg');
var g = svg.append('g');

var drag = d3.drag().on("drag", dragged).on("end",end);

var c = g.append('circle')
  .attr('r', 20).attr('cx', 25).attr('cy', 25)
  .call(drag)

var wasMoved = false;

function dragged() {
	d3.select(this).attr('fill', 'green').attr('cx', d3.event.x).attr('cy', d3.event.y);
  wasMoved = true;
}

function end() {
  if(wasMoved) {
  // It was a drag:
		d3.select(this).attr('fill', 'red').attr('stroke', 'orange').attr('stroke-width', 5);
  }
  // It was a click:
  else {
    d3.select(this).attr('fill', 'blue');
  }
  wasMoved = false;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何防止 d3.drag().on('end' 触发 .on('click' 的相关文章

  • 单击上一页的按钮路由到该页面后如何刷新页面

    我有 2 个页面 一个主页和一个页面 2 当我单击主页上的按钮时 它会路由到 page2 现在 单击主页上的按钮后 当我到达第 2 页时 它应该刷新 因为我的项目中存在一些缓存问题 我在ngoninit上添加了window location
  • 未捕获的类型错误:无法读取未定义的属性“toLowerCase”

    我收到此错误 它源自 jquery 框架 当我尝试加载准备好的文档上的选择列表时 出现此错误 我似乎无法找到为什么会出现此错误 它适用于更改事件 但在尝试手动执行该函数时出现错误 未捕获的类型错误 无法读取未定义的属性 toLowerCas
  • 如何修复网站 iframe 错误?

    当我访问此网址时 警告 推荐使用一些广告拦截器 网页链接加载良好 没有错误 但是 当我尝试通过加载同一页面时iframe在我的html代码中 出现错误 我的html代码
  • 如何在 JS Rails 响应中包含 HTML?

    我有一个响应 HTML 和 JS AJAX 查询的 FooController app controllers foo controller rb class FooController lt ApplicationController l
  • 在 Javascript 中动态添加事件处理程序

    我在使用 Javascript 时遇到了一个奇怪的问题 我得到的是一个特定格式的字符串 我将尝试用它创建一个表 该表每行只有一个单元格 字符串的格式为 每个单元格 行 需要显示内容 将传递给的参数onmouseover当用户将鼠标移动到显示
  • 根据用户区域设置过滤字符串列表

    当使用 AngularJS 1 6 处理 JavaScript 项目时 我有一个要过滤的字符串列表 例如 假设我的列表包含 rbol cig e a nido and tubo 当过滤西班牙语字符串时 如果我过滤 u 我会期望两者cig e
  • 在每页上插入折叠标记 (wkhtmltopdf)

    我正在使用 wkhtmltopdf 0 12 2 1 创建发票等 我需要在 pdf 的每一页上显示折叠标记 如果内容大于一页 如何在每个页面上使用 javascript 重复它们 这是我的基本标记 div class marks div c
  • 使用JQuery检查元素是否有边框?

    所以我正在玩 el css 尝试确定元素是否有边框 我用 css border style solid 设置边框 这是可行的 但实际上它设置了 4 种单独的样式 border right style border left style bo
  • JSON对象的长度[重复]

    这个问题在这里已经有答案了 该函数生成一个包含 json 对象的数组 var estoque function unpack estoque tnm total estoque vl id tid st tnm tnm split tota
  • 默认情况下嵌入带字幕的 Youtube 不起作用

    我正在尝试嵌入 Youtube 电影 并希望默认情况下打开字幕 From https developers google com youtube player parameters cc load policy https develope
  • 覆盖函数(例如“警报”)并调用原始函数?

    我想用调用原始版本的新版本覆盖 Javascript 内置函数 类似于用调用的版本覆盖类上的方法 super有多种语言版本 我怎样才能做到这一点 例如 window alert function str do something addit
  • 如何创建自定义元素扩展类的新实例

    我正在尝试以下示例谷歌开发者网站 https developers google com web fundamentals getting started primers customelements extendhtml我收到错误 Typ
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 为什么 document.getelementbyId 在 Firefox 中不起作用?

    我不明白为什么 document getElementById 在 Firefox 中不起作用 document getElementById main style width 100 当我检查 Firebug 时 它说 类型错误 docu
  • 水平平滑滚动 100px

    Heyjo problem 一周以来我一直在寻找 javascript 或 jQuery 代码 以便在我的网站上实现滚动按钮 我失败的那一刻是按钮应该多次工作的时候 他的任务不是滚动到专用元素 而是应该向左滚动 例如 100px 此外 滚动
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 限制 jQuery id 字符串吗?

    简而言之 我的问题是字符串在 jQuery 中作为可搜索 id 或可搜索内容有什么限制 更新 我得到了 ID 部分 但不是为什么我什至无法使用该字符串搜索 html 内容 对于任何愿意告诉我一个正则表达式来将模式从 MM dd yy HH
  • Jquery 两个字段的时间差(以小时为单位)

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2
  • WooCommerce 使用 AJAX 设置购物车数量?

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • 样式组件中的CSS' calc() [重复]

    这个问题在这里已经有答案了 尝试这个 const styledDiv styled div props gt props takeViewportHeight min height calc 100vh 16px 它不起作用 我是否遗漏了样
  • 警告:mysql_query(): 3 不是有效的 MySQL-Link 资源

    我遇到了这个奇怪的错误 但我不知道它来自哪里 Warning mysql query 3 is not a valid MySQL Link resource in 3号怎么了 我不明白 有没有人自己经历过这个错误 PHP 使用资源作为特殊
  • 如何在 Android 模拟器中安装 APK 文件?

    我终于成功混淆了我的 Android 应用程序 现在我想通过安装来测试它APK http en wikipedia org wiki APK 28file format 29文件并在模拟器上运行 如何在 Android 模拟器上安装 APK
  • 无法在 macOS High Sierra 上构建和安装 Valgrind

    我无法在 macOS High Sierra 上安装 Valgrind 无法通过brew 我尝试过3 10 https github com msgpack msgpack c issues 525 After make install 我
  • R语言变量冲突

    我有一个 R 脚本 它采用 R 的其他脚本并以这种方式操作它们 并且还执行它们的代码 我的脚本使用一些变量 显然 当其他脚本使用公共变量名时 我会陷入混乱 我希望我可以像在胶囊中一样执行其他脚本 这样重合的变量就不会互相影响 我一直在阅读有
  • 将冷却/计时器添加到 on_message [Discord.py]

    我最近开始用 Python 制作一个 Discord 机器人 用它测试 Python 的基础 并自己创建了一个带有多个命令的功能机器人 为了扩大其用途 我添加了一个级别 XP 系统 到目前为止该系统正在运行 bot event async
  • Nexus 7 上不显示菜单按钮

    所以我很长时间都面临这个问题 我的 Nexus 4 和 Nexus 7 都运行 Android 4 3 并且我有 targetSdkVersion 11 的应用程序 我使用 11 因为任何低于 11 的目标 sdk 都不支持我的多点触控 问
  • IE 7 和 8 中的 CSS 倾斜转换

    我有菱形样式的菜单 它使用以下代码 它在 Chrome firefox ie9 等中运行良好 但我现在需要在 IE 7 和 8 中运行 有没有办法在这些旧版浏览器上执行此操作 http jsfiddle net C7e7U http jsf
  • Django 过滤外键字段

    简洁版本 我有一个用于食谱的 Django 应用程序 并且想要过滤要发送到我的视图中的模板的数据 我基本上希望特定用户添加的所有收据都作为上下文发送 以下过滤返回错误消息以 10 为基数的 int 的文字无效 我的用户名 recipes R
  • jquery旋转图像并将它们保存为同名文件(覆盖)?

    我有一个像这样的简单场景 我想旋转图像 并将它们保存为现有的旧文件 现在 所有功能都已完成 但是当我下载 保存图像时 它总是创建新的文件名 这是我的代码 div img src image a png alt div
  • Opencv 代码慢:有问题吗?

    这是我尝试改善图像颜色的函数 它有效 但真的很慢 也许有人有更好的主意 static Mat correctColor Mat AImage Mat copyImage AImage copyTo copyImage Mat imgLab
  • FileInputStream 和 FileOutputStream 在 Java 中如何工作?

    我正在阅读有关 java 中的所有输入 输出流的信息Java 教程文档 https docs oracle com javase tutorial essential io bytestreams html 教程作者使用这个例子 impor
  • 使用 EPPlus 设置下载位置

    我正在关注This http www c sharpcorner com Blogs 47619 export to excel using epplus aspxEPPlus 上的教程 但我对如何将下载位置设置为登录用户的 下载 文件夹感
  • 获取 ScriptHandlerFactory 处理程序

    有没有办法调用 System Web Script Services ScriptHandlerFactory 类的 GetHandler 方法 该方法返回 IHttpHandler 类型对象 我知道 ScriptHandlerFactor
  • 防止 pip 安装某些依赖项

    我们正在开发一个AWS LambdaPython 中 Alexa 技能的函数并使用pip安装ask sdk打包到我们的dist 目录 pip install t dist ask sdk 问题在于 t dist 因为pip想要在那里拥有所有
  • 使用 XSLT 重新排序 xml 元素

    我有以下 xml 片段 它出现在很多地方 但 TYPE 元素出现的顺序是随机的 此外 不保证所有类型都可用 例如某些片段可能缺少 Visio 和 或 Outlook 或任何其他节点
  • 在 Oracle 中生成具有 2 个日期之间的时间间隔的行

    我有一个表格 其中给出了周日到周六的 医生开始时间 和 结束时间 我想创建 15 分钟的时段 在此基础上 患者单击日历日期时间间隔 其中显示已预订的时段 以下示例显示如何将时间分成 15 分钟的片段 它使用分层查询 一点解释 line 2
  • 当我的动画完成时,transitionend 事件不会触发

    我正在尝试使用 jQuery 在 css 动画完成时触发一个事件 并且它基本上可以正常工作 但由于某种原因transitionend直到我将鼠标从有问题的对象上移开后 事件才会被调用 方法如下 function replaceWithSea
  • 结构类型别名/无联合的标记联合

    两人 或以上 structs Base and Sub有一个共同的第一个 未命名 struct 转换 投射是否安全Base to Sub反之亦然 struct Base struct int id char data necessary s
  • 如何防止 d3.drag().on('end' 触发 .on('click'

    我有一个 svg 元素 我希望能够单独单击和拖动 据我所知在 D3 中 单击会触发 拖动结束 事件 也可能拖启动 在下面的代码中 只需单击圆圈即可为其显示红色轮廓 var svg d3 select body append svg var