对于想了解点击热图和鼠标坐标！–Javascript的读者，本文将提供新的信息，我们将详细介绍javascript指什么，并且为您提供关于JavaScriptoffset实现鼠标坐标获取和窗口内模块拖
对于想了解点击热图和鼠标坐标！ – Javascript的读者，本文将提供新的信息，我们将详细介绍javascript指什么，并且为您提供关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动、javascript – AngularJS – 如何在mousemove上存储鼠标坐标？、javascript – D3.js – 为什么鼠标悬停和鼠标对每个孩子元素发射？、javascript – D3js：如何通过鼠标点击获取Lat / Log地理坐标？的有价值信息。
本文目录一览：- 点击热图和鼠标坐标！ – Javascript（javascript指什么）
- JavaScript offset实现鼠标坐标获取和窗口内模块拖动
- javascript – AngularJS – 如何在mousemove上存储鼠标坐标？
- javascript – D3.js – 为什么鼠标悬停和鼠标对每个孩子元素发射？
- javascript – D3js：如何通过鼠标点击获取Lat / Log地理坐标？
点击热图和鼠标坐标！ – Javascript（javascript指什么）
1)网站有不同的主题,1与左边对齐,另一个与中心对齐.
2)屏幕尺寸在整个用户中发生变化.
我需要跟踪网站上的点击次数,但不幸的是,event.PageX和event.PageY是在考虑整个屏幕的情况下计算的.
例子
在第一个例子中,坐标[300,500]的点击可能位于大猩猩周围的某个地方(也许是他的鼻孔！=)).
在另一个例子中,点击坐标为[300. 500]可能会位于主要内容区域之外的某个地方！
底线：
如何解决这个问题,以便我可以建立一个准确的DIY点击热图？
知道这真的很有趣！多谢你们！ =)
解决方法
2)获取主要内容区域的relative mouse position.这样可以避免不同浏览器宽度/高度的不同位置问题.
jQuery docs for Mouse Position中有一个特殊的部分(如果您使用它)：
(Note that the pixel values give are
relative to the entire document. If
you want to calculate the position
within a particular element,or within
the viewport,you can look at offsetY
and offsetX,and do a bit of
arithmetic to find the relative value.Here is an example of finding the
position within the particular element
rather than the page:
$("#special").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('#status2').html(x +','+ y);
});
话虽这么说,也许是矫枉过正; Google Analytics也有热图功能.
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
offset
offset 即偏移量，使用 offset 系列相关属性可以 动态的 获取该元素的位置（偏移）、大小等，如：
元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注：返回的数值不带单位
offset 系列常用的属性包括：
element.offsetParent
返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回 body
注意，parentNode 和 offsetParent 还是有本质上的区别的：parentNode 返回的是直接父级元素，offsetParent 返回的是带有定位的父级元素。
element.offsetTop
返回元素带有定位父元素上方的偏移
element.offsetLeft
返回元素带有定位父元素左边框的偏移
element.offsetWidth
返回自身包括 padding, 边框, 内容区的宽度，返回数值不带单位
element.offsetHeight
返回自身包括 padding, 边框, 内容区的高度，返回数值不带单位
offset 和 style 的区别
| offset | style |
|---|---|
| offset 可以得到任意样式表中的样式值 | style 只能得到行内样式表中的样式值，无法获得内嵌样式 |
| offset 系列获得的数值是没有单位的 | style.width 获得的是带有单位的字符串 |
| offsetWidth 包含 padding+border+width | style.width 获得不包含 padding 和 border 的值 |
| offsetWidth 等属性是只读属性，只能获取不能赋值 | style 属性是可读写属性，style.width 可以获取也可以赋值 |
| 只想要获取元素大小位置的时候，用 offset 更合适 | 要对元素样式进行修改的话，使用 style 更合适 |
案例一：实时展示鼠标的坐标
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>鼠标位置获取-01</title>
<style>
.box {
width: 500px;
height: 500px;
background-color: #55aaff;
margin-left: 50px;
}
</style>
</head>
<body>
<p>获取鼠标在盒子内坐标</p>
<div></div>
<script>
// 在盒子中点击，想要获得鼠标距离盒子左右的距离
// 实现：
// 1. 获得鼠标在页面中的坐标，e.pageX, e.pageY
// 2. 获得盒子到页面中的距离, box.offsetLeft, box.offsetTop
// 3. 两者相减就能够获得鼠标在盒子中的坐标
// 下面看实现过程吧！
const box = document.querySelector(".box");
box.addEventListener("mousemove", function(e) {
// console.log(e.pageX, e.pageY);
// console.log(box.offsetLeft, box.offsetTop);
const x = e.pageX - this.offsetLeft;
const y = e.pageY - this.offsetTop;
box.textContent = `x: ${x}, y: ${y}`;
});
</script>
</body>
</html>
案例二：拖动模块
演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模块拖动-02</title>
<style>
* {
margin: 0;
padding: 0;
}
.login,
.modal {
display: none;
}
.login {
width: 512px;
height: 280px;
position: fixed;
border: #ebebeb solid 1px;
left: 50%;
top: 50%;
background-color: #fff;
box-shadow: 0 0 20px #ddd;
z-index: 999;
transform: translate(-50%, -50%);
text-align: center;
}
.modal {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.3);
z-index: 998;
}
.login-content {
margin: 100px auto;
text-align: center;
}
.login-content h3:hover,
.closeBtn:hover {
cursor: pointer;
}
.closeBtn {
position: absolute;
right: 10px;
top: 10px;
}
.login h4 {
margin-top: 10px;
}
.login h4:hover {
cursor: move;
}
</style>
</head>
<body>
<div>
<h3 id="openLogin">点击弹出模拟框</h3>
</div>
<div>
<divid="closeBtn">关闭</div>
<h4>点击我拖动吧</h4>
</div>
<div></div>
<script>
// 获取元素
const login = document.querySelector(".login");
const modal = document.querySelector(".modal");
const closeBtn = document.querySelector("#closeBtn");
const openLogin = document.querySelector("#openLogin");
// 点击显示元素
openLogin.addEventListener("click", () => {
modal.style.display = "block";
login.style.display = "block";
});
closeBtn.addEventListener("click", () => {
modal.style.display = "none";
login.style.display = "none";
});
// 实现拖拽移动功能
// 1. 鼠标按下获得鼠标在盒子内的坐标
const loginHeader = document.querySelector(".loginHeader");
loginHeader.addEventListener("mousedown", function (e) {
const x = e.pageX - login.offsetLeft;
const y = e.pageY - login.offsetTop;
const move = function (e) {
login.style.left = `${e.pageX - x}px`;
login.style.top = `${e.pageY - y}px`;
};
// 2. 移动鼠标
document.addEventListener("mousemove", move);
document.addEventListener("mouseup", function () {
document.removeEventListener("mousemove", move);
});
});
</script>
</body>
</html>
到此这篇关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动的文章就介绍到这了,更多相关JavaScript鼠标坐标获取和窗口内模块拖动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！
- 基于JavaScript实现数值型坐标轴刻度计算算法(echarts的y轴刻度计算)
- 如何利用js根据坐标判断构成单个多边形是否合法
- JavaScript使用canvas绘制坐标和线
- JavaScript 空间坐标的使用
- JavaScript实现捕获鼠标坐标
- js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
- JS图形编辑器场景坐标视口坐标的相互转换
javascript – AngularJS – 如何在mousemove上存储鼠标坐标？
我有许多静态div和一个跟随鼠标的可移动div.如果用户在可移动div与静态div重叠时单击,则会触发事件(当前为Bootstrap模式).目前,它还计算鼠标和静态div的距离,并根据距离改变背景颜色(即更接近红色div,背景更亮红色,更接近蓝色div,背景更亮蓝色,两者之间,颜色淡化/混合从红色到紫色到蓝色等).
目前,我只是想在鼠标移动时捕捉鼠标位置.
下一个目标是找到每个静态div的中心点.
解决方法
有关示例,请参见此plnkr.
视图
<divng-controller="TestCtrl" ng-mousemove="captureCoordinate($event)">
<div>x: {{x}}</div>
<div>y: {{y}}</div>
</div>
调节器
$scope.captureCoordinate = function($event){
$scope.x = $event.x;
$scope.y = $event.y;
}
与ng-mousemove指令一起,您可以将$event对象传递给控制器函数,并从那里获取x和y坐标.
javascript – D3.js – 为什么鼠标悬停和鼠标对每个孩子元素发射？
这是svg的结果.
<g id="main"> <circle r="114" fill="#F0E8D0"></circle> <text text-anchor="middle">The movie title</text> </g>
这是d3.js
var circles = [{r: innerRadius}];
svg.append("g").attr("id","main");
svg.select("#main").selectAll("circle")
.data(circles).enter()
.append("circle")
.attr("r",function(d){return d.r})
.attr("fill","#F0E8D0");
svg.select("#main").append("text")
.attr("text-anchor","middle")
.text(function(){ return "The movie title";});
当鼠标悬停并离开圈子时,我也想点火一些动画.
svg.select("#main")
.on("mouSEOver",function(){
//code for transition
}).on("mouSEOut",function(){
//code for transition
})
所以问题是：
当鼠标移动到圆圈中时,动画会按预期方式触发,但是当鼠标触摸文本元素时,mouSEOut事件会触发(鼠标离开圆圈),然后是鼠标悬停事件(鼠标进入文本元素),而不是合意.
看来,当鼠标触摸“< g>”的任何子元素时,将调用动画回调标签.
当鼠标触摸文本元素时,我不希望任何动画发生.我该怎么做？
解决方法
svg.select("#main").append("text")
.attr("text-anchor","middle")
.attr("pointer-events","none")
.text(function(){ return "The movie title";});
您可能还想在圆上设置事件,而不是在g元素上设置事件：
svg.select("#main").selectAll("circle")
.data(circles).enter()
.append("circle")
.attr("r",function(d){return d.r})
.attr("fill","#F0E8D0")
.on("mouSEOver",function(){
//code for transition
})
.on("mouSEOut",function(){
//code for transition
})
javascript – D3js：如何通过鼠标点击获取Lat / Log地理坐标？
var svg = d3.select("#viz").append("svg:svg")
.attr("width",320)
.attr("height",200)
.on("mousedown",mousedown)
.on("click",mouselocation);
如何通过点击D3js地图可视化来获取地理坐标？
欢迎使用演示链接.
编辑：相关演示列表：
> OpenLayers demo ……但我们D3js是什么.
> Jason Davies/rotate/使用projection.invert(d3.mouse(this))
解决方法
d3.select("svg").on("mousedown.log",function() {
console.log(projection.invert(d3.mouse(this)));
});
如果你想支持点击SVG的背景,你可能还想要一个带有指针事件的不可见矩形：全部. (另请注意：旧版本的D3使用的是d3.svg.mouse而不是d3.mouse.)
今天关于点击热图和鼠标坐标！ – Javascript和javascript指什么的讲解已经结束，谢谢您的阅读，如果想了解更多关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动、javascript – AngularJS – 如何在mousemove上存储鼠标坐标？、javascript – D3.js – 为什么鼠标悬停和鼠标对每个孩子元素发射？、javascript – D3js：如何通过鼠标点击获取Lat / Log地理坐标？的相关知识，请在本站搜索。
本文标签：
