小编hay*_*ner的帖子

Mousemove 事件未在页面元素或文档上触发

我正在尝试使用 js 滑块slick,但是当我在我的网站上包含滑块代码时,默认的“可拖动”选项不起作用。更具体地说,我无法在幻灯片 div 或网页 (Chrome) 中的文档上捕获任何 mousemove 事件。

在本地运行代码时,我可以毫无问题地观察 'mouseup'、'mousemove' 和 'mouseup' 事件,但是当我将滑块代码放入网页时,我只能观察到 'mouseup' 和 'mousedown' 事件.

下面是工作的本地代码。如果您运行它,它将在滑块 div 内记录 mousedown、mousemove 和 mouseup 事件。

当我将相同的代码移动到网站时,我无法观察到来自滑块 div 或文档的任何 mousemove 事件。是否有一些 js 已经在运行,可以完全阻止页面触发 mousemove 事件?

<html>
  <head>
      <title>My Now Amazing Webpage</title>

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
      <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
  </head>
  <body>

  <style>

    #container {
      width: 450px;
      height: 300px;
      margin: 0 auto;
      border: 2px solid black;
    }

  </style>

  <div id="container">
    <div class="your-class">
      <div><img src="http://lorempixel.com/300/300" /></div>
      <div><img …
Run Code Online (Sandbox Code Playgroud)

html javascript events mouseevent mousemove

5
推荐指数
1
解决办法
6839
查看次数

d3 .data键最初返回undefined

我试图在d3中绑定数据时使用可选的键功能.我有一个本地测试数据集,我试图使用每个对象的"标题"属性作为键.

当我的数据数组中只有3个对象时,关键功能似乎运行了4次.在d3文档中说,绑定数据时可能会多次调用数据键函数,我只是不明白我做错了什么.

这是我的对象和几行代码(我使用'console.log(i)'来说明我的困惑):

test:[
  {
    "desc":"This it the first test description text.",
    "image":"test1.jpg",
    "title":"Test Project 1"
  },
  {
    "desc":"This is the second test decription text.",
    "image":"test2.jpg",
    "title":"Test Project 2"
  },
  {
    "desc":"This is the third test decription text.",
    "image":"test3.jpg",
    "title":"Test Project 3"
  }
]  

console.log(obj.testJSON.test[0].title);   //line 178
console.log(obj.testJSON.test);   //line 179

d3.selectAll(".slider-image")
 .data(obj.testJSON.test, function(d,i) {console.log(i); return d; });   //line 182
Run Code Online (Sandbox Code Playgroud)

这给了我在控制台中的输出:

d3.key的控制台输出

尝试console.log'd'而不是'i'时:

 .data(obj.testJSON.test, function(d,i) {console.log(d); return d; });   //line 182
Run Code Online (Sandbox Code Playgroud)

第一个日志未定义:

在此输入图像描述

当我尝试实际设置密钥时,我认为它应该是:

  d3.selectAll(".slider-image")
   .data(obj.testJSON.test, function(d) {return d.title; });
  }
Run Code Online (Sandbox Code Playgroud)

第一次调用key函数时出现类型错误:

 'Uncaught …
Run Code Online (Sandbox Code Playgroud)

javascript d3.js

4
推荐指数
1
解决办法
1231
查看次数

Bootstrap工具提示在初始悬停时处于错误位置,然后处于正确位置

我在网页上使用来自twitter bootstrap的工具提示.工具提示已初始化,但在第一次悬停时,它处于错误的位置; 但是,在随后的悬停中,工具提示处于正确的位置.

我认为问题出现了,因为工具提示附加的div是绝对定位的.

这是我的html中的div标签:

<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Run Code Online (Sandbox Code Playgroud)

这是第一个悬停时工具提示的显示方式: 这是第一个悬停时工具提示的显示方式

以下是在此之后每个悬停显示的方式: 以下是它在每次悬停后的显示方式

(尺寸不仅仅改变截图裁剪尺寸)

应用于div的样式是:

#sample-menu {
  position: absolute;
  top: 95px;
  right: 608px;
}
Run Code Online (Sandbox Code Playgroud)

我可能会以不同的方式定位div以使其工作,我只是想知道为什么工具提示似乎在绝对定位的div上完美地工作,但仅在第一次悬停之后.

**我在没有绝对定位的div上添加了一些工具提示,我遇到了同样的问题(工具提示的第一次出现从我的元素中删除,然后在第一次出现之后它是正确的).我在页面上有一个svg,其元素正在添加并使用javascript(d3)进行调整.在添加/调整所有页面元素之后,似乎需要调用某些东西来重新定位工具提示,但是,Bootstrap Tooltip或Tether重新定位解决方案都没有对我有用.

html css tooltip twitter-bootstrap

4
推荐指数
4
解决办法
1万
查看次数