尝试为纸牌游戏实现动作监听器答案

【问题标题】：Trying to implement an action listener for a Card Game尝试为纸牌游戏实现动作监听器
【发布时间】：2016-01-13 05:31:27
【问题描述】：

所以我试图为我的游戏获取一张图片（一张卡片图片），以便在点击它时显示为空白。我希望它出现一个空白图像来模拟它消失。这是一个三峰纸牌游戏。我已经有一个功能可以测试卡是否可以玩，我只是很难让它正常工作，因为是 Javascript 的新手。或者如果有人知道我可以解决这个问题的更好方法，我会全力以赴，谢谢。

这是部分代码：

<!DOCTYPE HTML>
<html>

 <button onclick="newGame(); Deal();" style=" top: 35px; left: 80px; position: absolute;">New Game

 <div onmousedown="A(this)"><button onclick="Tri_Peak_Game()"><img id="leftRow4E1" src="cardback.jpg" alt="cardback" style="width: 100px; height: 150px; top: 200px; left: 150px; position: absolute;" /> </button> </div>

<script language="javascript" type="text/javascript">







</script>
</html>

【问题讨论】：

blank_dissapear.png 存在吗？（包括拼写错误？）
很抱歉，但使用您问题中的代码无法重现该错误。请edit您的问题包括minimal reproducible example。

标签： javascript html

【解决方案1】：

这是一个简单的概念验证实现，它使用querySelector 和addEventListener 来处理“卡片”上的mousedown 和mouseup 事件。

function cardMouseDown(event) {
  event.target.src = "http://www.alderac.com/images/2015/01/playing-cards.jpg";
}

function cardMouseUp(event) {
  event.target.src = "http://globe-views.com/dcim/dreams/card/card-04.jpg";
}


document.querySelector('.card').addEventListener('mousedown', cardMouseDown);
document.querySelector('.card').addEventListener('mouseup', cardMouseUp);

<div>
        <img class="card"
             id="leftRow4E1"
             src="http://globe-views.com/dcim/dreams/card/card-04.jpg"
             alt="cardback"
             style="width: 100px;" />
</div>

【讨论】：

谢谢，我相信这将帮助我实现我需要在我的程序中发生的事情。