我正在尝试使用 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) 我试图在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)
这给了我在控制台中的输出:
尝试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) 我在网页上使用来自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重新定位解决方案都没有对我有用.