草庐IT

javascript - jqPlot 系列上的 jqplotClick 事件(iOS 设备 Safari 浏览器)

coder 2023-07-27 原文

我在对 jqPlot 项目执行操作点击时遇到了一些问题，我希望其他人可以阐明问题所在。

我有一个用 jqPlot 渲染的条形图，它使用以下代码将点击事件处理程序附加到(在 jqPlot 图表上):

$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

myClickHandler 看起来像这样:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
  alert('you have triggered click action');
}

我的意图是，通过使用这个简单的 jqPlot 实现，当点击图表内的区域(包括条形图项)时将触发警报操作。这在任何桌面浏览器(IE6/7/8/9、Chrome、Safari)中都能完美运行。

但是，我遇到的问题是，当我使用 iPhone/iPad 访问网站时，除了上面指定的点击操作行为异常之外，一切都完美呈现。

如果我尝试触摸任何条形图项目，它不会提醒“您已触发点击操作”-好像什么都没发生。

但是，当我尝试单击(触摸)图表的空白区域时，警报消息正常触发。

有什么想法吗？

最佳答案 

$.jqplot.eventListenerHooks.push(['jqplotClick', myClickHandler]);

此调用会将 onClick 处理程序附加到整个事件 Canvas 。 (此事件 Canvas 与图的大小一致，应该高于所有其他 Canvas 才能工作 - 这意味着您可能需要手动修改它的 z-index 才能使其正常工作)。我认为您的情况是这样的:

  1. 您正在将“myClickHandler”方法附加到事件 Canvas 。每次单击事件 Canvas 时都会触发它，无论在何处 - 在系列上方或情节背景上方。

  2. 在使用条形图渲染器的情况下，此事件 Canvas 位于系列 Canvas 下方(它要么在系列 Canvas 之前创建，要么具有较低的 z-index)。解决方案是在创建图表后手动增加事件 Canvas 的 z-index。之后它将位于顶部，并且将正确处理点击事件。

  3. 请记住，无论在何处，每次点击图都会触发此点击事件。解决方案是像这样过滤“myClickHandler”方法的执行:

代码:

function myClickHandler(ev, gridpos, datapos, neighbor, plot) {
    if (isClickEventOverTheSeries(gridpos)) {
        alert('you have triggered click action');
    }
}

在此示例中，gridpos 是包含 2 个点的数组 - 单击事件的 x 和 y 坐标。 “isClickEventOverTheSeries”方法是检查在此坐标下是否绘制了系列的函数。我不确定如何使用 BarChart 渲染器实现此目的 - 我从未使用过它，但是在渲染行中有一种方法可以检查它...

希望对你有帮助

关于javascript - jqPlot 系列上的 jqplotClick 事件(iOS 设备 Safari 浏览器)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5114155/

jqplotClickjavascriptstrongmyClickHandlerCanvasjqueryiosonclickjqplot

有关javascript - jqPlot 系列上的 jqplotClick 事件(iOS 设备 Safari 浏览器)的更多相关文章

  1. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  2. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  3. ruby-on-rails - date_field_tag，如何设置默认日期？ [ rails 上的 ruby ] - 2

    我想设置一个默认日期，例如实际日期，我该如何设置？还有如何在组合框中设置默认值顺便问一下，date_field_tag和date_field之间有什么区别？ 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag，如何设置默认日期？[rails上的ruby]，我们在StackOverflow上找到一个类似的问

  4. ruby-on-rails - openshift 上的 rails 控制台 - 2

    我将我的Rails应用程序部署到OpenShift，它运行良好，但我无法在生产服务器上运行“Rails控制台”。它给了我这个错误。我该如何解决这个问题？我尝试更新ruby​​gems，但它也给出了权限被拒绝的错误，我也无法做到。railsc错误:Warning:You'reusingRubygems1.8.24withSpring.UpgradetoatleastRubygems2.1.0andrun`gempristine--all`forbetterstartupperformance./opt/rh/ruby193/root/usr/share/rubygems/rubygems

  5. ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2

    我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que

  6. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  7. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  8. ruby-on-rails - 事件管理员日期过滤器日期格式自定义 - 2

    是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

随机推荐