Vanilla Javascript-如何在同一按钮上使用mouseup和mousedown来更改和还原css类的值？

问题描述

我是一个初学者，学习使用香草javascript。我已经搜索了2天，并且从昨晚开始在几个javascript facebook组中发布了问题，但是我还没有找到解决方案。也许我在搜索中没有正确询问问题，但是我只是被卡住了。如果出于某种原因，我提出一个已经回答的问题，我深表歉意。以我的辩护，初学者有时意味着我们不确定如何确切地找到答案。 继续...

我试图弄清楚如何对同一按钮使用2个eventListeners来更改css属性值。我希望function1在mousedown上运行，而function2在mouseup上运行。我认为我的问题出在(event)参数上。是否有办法确保function1中的事件参数仅针对mousedown的事件？然后将事件指向function2以将事件用于mouseup？ 这是我到目前为止所拥有的... html

<button class="my-btn">My button</button>
<div class="my-class">
some content
</div>

JavaScript

let myBtn = document.querySelector('.my-btn');
let myClass = document.querySelector('.my-class');
myBtn.addEventListener('mousedown',function1);
myBtn.addEventListener('mouseup',function2);

function function1(event){
    myClass.style.bottom = "-16em";
}

function function2(event){
    myClass.style.bottom = "0";
}

解决方法

很好，您已经开始从事Js工作。

我创建了一个运动场，该运动场会在mouseup和mousedown事件发生时更改背景颜色。请访问以下链接。

https://jsfiddle.net/kqydbwhL/

此外，我感觉就像在您的代码中。

myBtn.addEventListener('mousedown',function1);
myBtn.addEventListener('mouseup',function2);

myBtn应该替换为myClass，因为您是将元素存储到myClass中，但是在收听事件时，您将目标定位为myBtn的{​​{1}}

谢谢。

---

我认为您已更新了问题描述中的代码段。 这是具有这些更改的新的游乐场URL。

https://jsfiddle.net/6pzhjvfL/17/

,

看了看笔后，似乎应该在my-class中设置position属性。 Bottom属性不适用于静态位置，静态位置是所有元素的默认位置。

也许您可以了解有关底层属性here的更多信息。

看看这个example。我将position:relative添加到了my-class。如果您想要得到的结果，请尝试使用position:absolute。

,

在查看了此处的回复后，有人向我指出我的代码实际上按照我想要的方式工作。所以我回到了原来的项目进行审查。我发现我有function2嵌套在'function1'里面，这不是故意的。问题是我的文件底部的花括号放错了位置，完全看不见。我浪费了两天时间来寻找问题的答案，最终导致了我自己的语法错误。

谢谢大家的帮助。将来我会小心翼翼，以免再次发生这种情况。