当一个元素被javascript中的另一个元素触摸时，我如何改变它的位置？
当一个元素被JavaScript中的另一个元素触摸时，你可以通过修改该元素的CSS属性来改变它的位置。具体的步骤如下：
- 首先，你需要给需要被触摸的元素添加一个事件监听器，以便在触摸事件发生时执行相应的代码。可以使用addEventListener()方法来添加事件监听器。
- 在事件监听器中，你可以通过获取需要改变位置的元素的引用，使用JavaScript来修改该元素的CSS样式属性。常用的CSS属性包括
position、top、left、right和bottom。 - 通过修改CSS属性的值，你可以改变元素的位置。例如，如果想要将元素向右移动10像素，可以将
left属性的值增加10。
以下是一个示例代码，演示如何通过JavaScript改变元素的位置：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
// 获取需要改变位置的元素的引用
var box = document.querySelector('.box');
// 添加事件监听器，当另一个元素被触摸时执行相应的代码
document.addEventListener('touchstart', function(event) {
// 修改元素的CSS属性来改变位置
box.style.left = '200px';
});
</script>
</body>
</html>在上述代码中，通过获取具有box类名的元素的引用，并在触摸事件发生时将left属性的值修改为200px，实现了将元素向右移动的效果。
对于推荐的腾讯云相关产品和产品介绍链接地址，可根据具体需求和场景进行选择，例如：
- 云服务器（ECS）：提供弹性计算能力，适用于搭建网站、应用开发、数据处理等场景。详细信息请参考：云服务器产品介绍
- 云存储（COS）：提供高可靠、低成本的对象存储服务，适用于图片、音视频、备份等场景。详细信息请参考：对象存储产品介绍
- 人工智能（AI）：提供多种人工智能服务，包括图像识别、语音识别、自然语言处理等。详细信息请参考：腾讯云人工智能
- 物联网（IoT）：提供全链路的物联网解决方案，包括设备接入、数据存储、数据分析等。详细信息请参考：物联网产品介绍
- 区块链（Blockchain）：提供可信赖的区块链基础设施和服务，适用于金融、供应链等领域。详细信息请参考：腾讯云区块链
请注意，上述推荐的腾讯云产品仅为示例，实际选择应根据需求进行评估。
相关·内容
我是JavaScript的新手，我正在尝试用javascript：http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/创建一个类似这样的游戏。除了我不被允许使用canvas元素，所以我使用的代码似乎不起作用。我遇到的问题是，当蛇/
浏览 14提问于2019-06-18得票数 2
我正在建立一个与phonegap的android应用程序。我正在尝试实现一个触摸移动事件时，用户触摸作为元素。但我仍然不能让它变得完美。触摸移动事件工作完美，但当我触摸该区域并将手指拖到另一个触摸区域时，没有事件触发。
所以要点是:- User触摸页面中的一个</em
浏览 1提问于2012-02-14得票数 5
当视图控制器的视图第一次显示时，我想运行一个动画，其中视图控制器中的所有元素都从屏幕底部的外部滑动到它们的自然位置。为了实现这一点，我在viewDidLayoutSubviews中执行subview.frame.origin.y += self.view.frame.size.height。然后我在viewDidAppear中用subview.f
浏览 2提问于2014-11-25得票数 7
回答已采纳
2回答
在my site 上，当您使用:hover事件触摸一个元素时，:hover属性将保持活动状态，直到另一个具有:hover属性的元素被触摸。将属性从活动状态移除的唯一方法是刷新页面。如何禁用触摸屏设备的:hover事件？
浏览 0提问于2014-12-24得票数 1
在HTML中，我习惯于使用输入按钮看到对JavaScript函数的调用，例如：由于我是JavaScript新手，我注意到JavaScript程序员使用以下更多的东西：
浏览 1提问于2017-10-01得票数 1
回答已采纳
我正在尝试制作一个Javascript应用程序，当鼠标触摸元素时，元素将慢慢淡出，当鼠标离开元素时，元素将逐渐淡入。我正在使用Prototype和Scriptaculous，那么有没有一个原型函数可以告诉我鼠标是否在任何给定的时间接触到一个对象？我使用脚本淡出/FadeIn效果的主要
浏览 2提问于2012-01-30得票数 1
1回答
我正在尝试使HTML元素在多点触摸上可拖动。如果有一种方法，使它只向右拉，而不是向左，那将是伟大的，因为这正是我正在寻找的。
如何在javascript</em
浏览 3提问于2013-06-10得票数 0
我的文档中有几个元素，加载完所有内容后，我使用jquery更改了一些元素的位置，但是索引没有更新，据我所知，当一个元素移动到另一个元素上时，它的索引应该更新，jquery中是否有任何命令在文档中移动后更新索引谢谢你们
我使用indx = $("#container div"
浏览 0提问于2010-07-27得票数 0
2回答
如果您切换放置在上面的元素的高度，在触摸设备上有一种关于链接可点击区域的奇怪行为。如果运行以下代码段(例如，将其保存在本地并使用chrome来模拟触摸事件)，您将注意到散列#mylink被添加到url中，在某些情况下没有单击红色链接区域。有时你点击红色区域，它就不会被添加。如果您单击上红色区域(第一个200 to，灰色区域最小化)，#mylink不会添加到url中。=>为什么？</a>
</
浏览 7提问于2016-12-20得票数 6
回答已采纳
1回答
我找不到以下问题的解决方案:有一个元素，当另一个元素被改变时，当它有相同的索引时，它应该改变："index“变量是可以的，但是<e
浏览 0提问于2012-04-22得票数 3
回答已采纳
我正在捕捉一幅图像，并想对该图像做一些计算，为此，我需要获得图像上一些斑点的位置。为此，我使用了draggable元素，我的想法是拖动一个元素到图像上的点，得到可拖动元素的x和y位置来进行计算。我使用了以下代码 child: Stack(
children:
浏览 2提问于2019-11-18得票数 8
我试图创造简单的视差效应，改变背向位置，但在iOS Safari中，移动并不平稳。背景只在我发布触摸屏时才改变它的位置，而不是当我滚动它时。Javascript： var scrolled = $(win
浏览 2提问于2013-03-24得票数 4
2回答
我正在制作一个单页面的应用程序与超文本标记语言，CSS和Javascript (没有jQuery或类似的)。这个应用程序由许多可以通过Javascript更改的UI页面组成。在电脑上使用鼠标的用户体验很好，但在触摸屏(移动设备等)上就不是那么好了。
有许多具有CSS悬停图形效果的按钮。如果我在触摸屏上点击一个按钮更改页面，指针停留在那里触发下一个元素的CSS悬停，
浏览 1提问于2014-12-30得票数 4
3回答
CSS:用于触摸屏逆向工程的悬停
、、、、
我找到了，它有一个子菜单，在我的iPhone/Pad上运行得很好，我很好奇他们是如何让li:hover ul{在触摸屏上工作的？我已经看过了整个HTML，CSS，JS，没有什么特别的，所以如果有人有线索可以有一个峰值，我会非常感兴趣的，他们发现了什么。
浏览 3提问于2011-04-12得票数 1
我有一个职位:固定在滚动网页上的div。
起初，事件可以工作，但是当页面滚动时，当固定的div保持在位置时，它的“触摸”区域似乎会改变(它似乎滚动--除了在另一个div的顶部，或者取决于页面布局.)。最后，如果你滚动得太多，就不会收到任何触摸事件。有时底层div会接收事件。alert(
浏览 15提问于2012-01-10得票数 11
2回答
纯css :仅用鼠标悬停
、、、
触摸屏上的:hover可能是一个可访问性问题(下拉列表)，或者只是将设计元素弄糟(按下按钮改变颜色，而不是由于虚拟悬停而恢复)。所以，我决定，当一个元素被触摸时，当它与鼠标在一起时，我会有不同的行为。这很容易用Javascript和利用mousein和mouseout事件来实现，并在适当的地方
浏览 6提问于2015-02-04得票数 1
如果链接具有使您保持在同一页上的javascript处理程序，则在单击另一个链接之前，悬停状态不会更改。
如果您有一个ajax小部件来提问，并且每个答案都是链接，这就很奇怪了。当您触摸其中一个答案时，它会突出显示悬停状态，然后当问题和答案被一个新的问题和答案替换(使用javascript)时，出现在与前一个答案相同位置<
浏览 1提问于2010-06-25得票数 6
回答已采纳
3回答
我需要保持一个元素的滚动偏移量与另一个元素(实际上是窗口)保持同步，在移动Safari (iPad)上滚动的惯性“滚出”阶段，我在这样做时遇到了困难。$win.scroll(function() { })
但是在iPad上测试接口时，我注意到div既没有在触摸阶段被更新，当</e
浏览 20提问于2013-03-08得票数 7
回答已采纳
我试图找出我可以使用什么库，用于只使用Javascript的Tinder风格的拖放手势。
动画恢复到原来的位置。
如果元素在释放时位于指定的拖放区域上，则<
浏览 0提问于2014-09-08得票数 7
回答已采纳
1回答
目前正在做一个项目，然后被卡住了。在UL元素上实现延迟加载，并希望在加载/获取新元素时获得其相对/绝对顶部位置。是否有可能获得这些值而不涉及任何鼠标事件(滚动启动、滚动、单击、触摸启动、触摸)$('#elem').position().top;
并且总是获取新的元素.top()，但是console.log显示的<
浏览 3提问于2017-05-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
