小编Jul*_*ian的帖子
忽略mousemove上的子元素
我尝试使用mousemove获取相对于元素的鼠标位置.它工作正常,但当鼠标悬停在子元素上时,坐标相对于该子元素.我希望鼠标位置相对于父div,而不是孩子.
例如,请参阅此JSFiddle.
var object = document.getElementsByClassName('object'),
scene = document.getElementById('scene');
function initMove() {
for(var i=0; i<object.length; i++) {
object[i].addEventListener("mousemove", function(event) {
//event.stopPropagation();
return false;
}, false);
}
scene.addEventListener("mousemove", function (event) {
//event.stopPropagation();
//event.currentTarget;
moveX = event.offsetX;
moveY = event.offsetY;
console.log(moveX + ' + ' + moveY);
}, false);
}
function init() {
initMove();
document.onselectstart = function(){ return false; }
};
init();?
添加event.stopPropagation()子返回没有数据.而且我不确定它是如何event.currentTarget工作的.
我不能使用mouseenter或其他所有鼠标只控制,因为我希望它是触摸友好的(通过touchmove替换mousemove).
有任何想法吗？
推荐指数
解决办法
查看次数
鼠标“单击并拖动”滚动行为和 CSS 滚动对齐
我正在构建一个简单的滑块动画，该动画使用本机 CSS 滚动捕捉和滚动事件监听器进行控制。您可以在这里看到一个工作示例： https: //codepen.io/juliangarnier/pen/10d5ad6a2d9bf2cbac8e8d2e289153fa
我正在尝试在桌面上添加单击和拖动行为，不幸的是，当scrollLeft值为通过 JavaScript 更新。它的工作原理是设置scroll-snap-type: none;用户何时开始拖动，但删除平滑的捕捉动画。
我注意到，在 Chrome 开发工具中模拟触摸事件时，使用鼠标时滚动动画效果非常好。我想知道是否可以重新创建 Chrome 开发工具在纯 JS 中使用的同类触摸事件模拟。或者，如果有人设法scroll-snap-type: x mandatory;在保持捕捉动画的同时手动更新元素的滚动位置。
编辑：
这是该示例的更新版本，其中使用了鼠标事件
el.scrollTo({
left: newScrollLeft,
behavior: 'smooth'
})
事件上mouseup，并切换滚动捕捉属性。
https://codepen.io/juliangarnier/pen/b3bc58f943768f5276563ae7077e41e0?editors=0100
它非常接近我想要的，但仍然缺少使用正常滚动手势时出现的滚动动量。
推荐指数
解决办法
查看次数
将鼠标坐标转换为3D计划
我在javascript/jquery(基于DOM,而不是canvas)中构建某种拖放应用程序.
我们的想法是能够在3D场景上拖动div(以3D旋转的div).
它适用于2D平面图,问题是当我在3D中旋转场景时,对象位置不会反映实际的鼠标位置,而是以3D形式转换的坐标
插图例子:
我希望对象相对于鼠标的绝对位置移动.
我像这样计算鼠标位置:
document.addEventListener(gestureMove, function (event) {
if (mouseDown == true) {
event.preventDefault();
moveX = (event.pageX - $('#scene').offset().left);
moveY = (event.pageY - $('#scene').offset().top);
}
#scene {
width: 1000px;
height: 1000px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX( 35deg );
}
早期的解决方案是基于初始位置计算鼠标位置和对象之间的差异,并在拖动期间将其添加到对象位置.它工作正常,但动画真是波涛汹涌而且根本不光滑.
我确信有一种更简单的方法来获得相对于3D计划的鼠标坐标,但此时无法找到真正的解决方案.
关于此主题的大多数搜索结果都指向面向游戏的语言或canvas/webgl问题.
有任何想法吗 ？
谢谢
推荐指数
解决办法
查看次数
无法在webkit浏览器上以全屏模式在文本输入中键入任何字母或数字
切换到全屏模式(在chrome和safari上测试)后,我无法在文本输入中键入任何字母或数字,但我仍然可以输入特殊字符,*¨%£但没有简单的字母......
代码非常简单:
HTML
<button type="button" id="fullScreen">LAUNCH FULLSCREEN</button>
<input type="text" />
JS
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
document.getElementById("fullScreen").addEventListener("mousedown", function(){
launchFullScreen(document.documentElement);
}, false);
正如Jan Dvorak所提到的,只有在使用js函数时才会出现问题,使用浏览器内置全屏按钮/快捷方式时不会出现错误
看到它的实际效果:
http://jsfiddle.net/QwqT7/show/
更新2:
刚刚在Firefox for Mac上测试过,在全屏模式下没有问题.似乎问题只是webkit.
推荐指数
解决办法
查看次数
Javascript - XMLHttpRequest,结果总是未定义的
我正在尝试测试xml文件是否有标签" <group>"
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", "xmlfile.xml", false);
xmlhttp.send(null);
xml = xmlhttp.responseXML.documentElement;
var thegroup = xml.getElementsByTagName('group')[0];
if (!group) {
alert('No <group> in the XML: ' + xml);
return;
} else {
alert(xml + 'have a <group> tag');
}
即使我的xml文件有标签" <group>"的结果总是负的,而变量" thegroup"是不确定的.
" xml"给我"[对象元素]"
我的错误在哪里？
PS:我只对webkit感兴趣,我现在不关心IE,Opera或Firefox.
编辑:这是我的实际代码
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
<title>xmltest</title>
<script type="text/javascript">
function init() {
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET", "xmlfile.xml");
xmlhttp.send(null);
xmlhttp.onreadystatechange = callbackFunction; …推荐指数
解决办法
查看次数
如何将数组中的每个数字除以javascript中的变量？
我需要一种简单的方法来将数组中的所有数字（包含在对象中）除以javascript（无jquery或其他库）中的变量：
var divisor = 16;
var array = [{"x":0,"y":16},{"x":16,"y":32},{"x":32,"y":48}];
预期结果：
[{"x":0,"y":1},{"x":1,"y":2},{"x":2,"y":3}];
有任何想法吗 ？
推荐指数
解决办法
查看次数
标签 统计
javascript ×6
3d ×1
animation ×1
css ×1
fullscreen ×1
jquery ×1
mousemove ×1
scroll-snap ×1
slider ×1
xml ×1