个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
In my code i am using two button to display different Display from the same page as two color. When i click on green color for 3 second then only i am firing the call and displaying related data. Red button functions as a normal function and it works.
我的问题是第一次单击“尝试绿色”按钮 3 秒，它没有任何反应，我必须第二次单击 3 秒才能显示绿色。点击“TRY IT GREEN”按钮两次后，以后也可以一键使用。
Any help would be highly appreciated, so that i dont have to click two times at the beginning.
var pressme = document.getElementById('pressme');
var button1=document.getElementById('myBtn');
var button2=document.getElementById('myBtn1');
var showme = document.getElementById('showme');
button1.addEventListener('click', display1
);
button2.addEventListener('click', display2
);
function display1(){ //displaying red background
pressme.style.display = 'none';
showme.style.display = 'block';
button1.style.display= 'none';
button2.style.display= 'block';
}
function display2(){ //displaying green background after 3 sec
let timeout = null;
button2.addEventListener( 'mousedown', event => {
timeout = setTimeout(() => {
pressme.style.display = 'block';
showme.style.display = 'none';
button2.style.display= 'none';
button1.style.display= 'block';
}, 3000 );
});
button2.addEventListener( 'mouseup', event => {
if ( timeout ) clearTimeout( timeout );
});
}<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<table id="pressme" style="width:100%" bgcolor="red" height =500px>
<button id="myBtn">Try it red</button>
</table>
<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
<button id="myBtn1" style=display:none; >Try it green </button>
</table>
</body>
</html>最佳答案
您之前需要附加事件监听器，问题是您在单击按钮后附加了鼠标事件监听器，因此它们第一次不起作用。
工作代码:
var pressme = document.getElementById('pressme');
var button1=document.getElementById('myBtn');
var button2=document.getElementById('myBtn1');
var showme = document.getElementById('showme');
button1.addEventListener('click', display1);
function display1(){ //displaying red background
pressme.style.display = 'none';
showme.style.display = 'block';
button1.style.display= 'none';
button2.style.display= 'block';
}
button2.addEventListener( 'mousedown', event => {
timeout = setTimeout(() => {
pressme.style.display = 'block';
showme.style.display = 'none';
button2.style.display= 'none';
button1.style.display= 'block';
}, 3000 );
});
button2.addEventListener( 'mouseup', event => {
if ( timeout ) clearTimeout( timeout );
});<!DOCTYPE html>
<html>
<head>
<title>Realtime communication with WebRTC</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<table id="pressme" style="width:100%" bgcolor="red" height =500px>
<button id="myBtn">Try it red</button>
</table>
<table id="showme" style="width:100%;display:none;" bgcolor="green"height=500px>
<button id="myBtn1" style=display:none; >Try it green </button>
</table>
</body>
</html>关于javascript - Mousedown 和 Mouseup 与触发调用有关？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54215407/
25
4
0
当我点击菜单时，菜单会显示，但是当指针从菜单上移开时，它会在 2-5 秒后隐藏。 我希望菜单在单击时切换，并在单击页面上的其他任何位置时显式隐藏，如 this demo. 所示。 this fiddl
我找到了一些代码，并做了一个 jsfillde用它。我需要知道当您离开文档正文时如何在下面的函数中触发 mouseup(在 fiddle 示例中，就像将对象拖到 HTML 部分中并将鼠标单击留在那里)
我创建了一个函数，可以根据菜单的可见性来切换菜单。我还为文档分配了一个 mouseup 事件，如果用户单击菜单之外的任何位置，菜单就会关闭。问题是当为 document 添加 mouseup 事件监听
我正在尝试使用 jQuery 创建按住确认按钮。问题是当我在此函数中插入代码时，mouseup 事件没有触发。它仅在函数为空且只有 console.log 时触发。这是示例: self.on('mou
我有一个包含跨度的 div。我有一个 mouseup 和 mousedown 事件，在按下 div 时应该触发。但是它无法正常工作。 请转到这个 fiddle :http://jsfiddle.net
您好，我正在研究两个函数 swapFE() 和 swapEF()。这两个功能的目的是将法语短语与我已经完成的英语短语交换。 当我在每个短语上按下鼠标按钮时，会出现英文翻译，这正是我想要的。 问题是当我
我有一个功能可以让我四处拖动东西。我的 js: $(function() { $( svgcanv ).css('cursor', '-moz-grab'); va
大家好，我的代码运行良好，但我希望脚本在鼠标松开事件时停止。 这是我现在拥有的一个例子。我怎样才能在鼠标松开事件上停止脚本，以便它看起来只在拖动图像时显示坐标。 谢谢! http://jsfiddle
我正在使用 Windows Presentation Foundation (WPF) 制作 GUI。当我用鼠标单击一个按钮(向左或向右)时，我想要显示一个消息框。到目前为止，我已经设法从教程中制作了
我正在使用 Konva 库绘制 Canvas 并将图像拖到 Canvas 上 我的问题是如何使用 Konva 选择 Canvas 的一部分并为所选部分填充颜色 1) 用户通过拖动鼠标选择一个部分2)
当您在图像上 mousedown 时，稍微移动鼠标 (mousemove)，然后松开 (mouseup)， mouseup 不是用 jQuery 触发的。 jsfiddle:http://jsfidd
我正在尝试制作一个非常简单的应用程序，当鼠标按钮按下时，用户可以使用选定的颜色绘制到表格中，当鼠标松开时事件停止。 绘图效果很好，唯一的问题是释放鼠标时事件不会停止。我已经尝试过很多方法，但显然我做错
我找不到任何答案，所以我在这里提问。目前我没有任何触摸设备，因此无法测试它。 如果在容器外部单击，以下代码将隐藏容器中的所有子容器。 $(document).mouseup(function(e) {
我已经搜索了很多，但似乎无法找到令人满意的解决方案。希望有人能帮忙。 当我使用 jQuery 时，我还编写了数千行 JavaScript。所以“纯”JavaScript 解决方案就可以了。 我正在尝试
我已经阅读了 stackoverflow 上与这种情况相关的几个答案，但没有一个解决方案有效。 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作。 有可能实现这个目
我正在尝试完成一个基本的阻力。在 mousedown 上，项目开始拖动，但速度与鼠标不同，因此当鼠标位于窗口外部时我继续拖动，但如果鼠标不在页面上，我无法获取 mouseup 事件。 我可以看到其他页
编写一些拖放代码，我想取消 mouseup 处理程序中的单击事件。我认为防止默认应该可以解决问题，但点击事件仍然被触发。 有办法做到这一点吗？ 这不起作用: test $("#test").mous
如何将 -mouseUp: 事件与 NSArrayController 的 -add: 方法关联起来？ -mouseUp: 事件位于不同的对象中，但在保存受控数组的对象中进行 #import 编辑和实
我正在尝试使用 Javascript(无库)拖动图像。我能听mousedown和 mousemove事件。由于某种原因，我无法捕获 mouseup mousemove 之后的事件. (如果是单击，我可
我正在尝试使用一对单选按钮来启动/停止自动水平滚动条。我已经尝试了几种在 SO 上找到的 jquery 技术，但我无法让它们发挥作用。 这是我最新的尝试: $( "#radAutoScroll0" )
我是一名优秀的程序员,十分优秀！