在鼠标向上切换图像 - 拖动图像问题

Question

我正在使用JavaScript在2张图片之间切换。我正在使用OnClick和MouseDown个事件来执行此操作。

MouseDown事件切换到蓝鸟。

OnClick应该切换回红鸟。

问题是如果我按住然后拖动图像放开它不会改变回另一个图像。 好像它从未在图像上触发onclick事件。

目标：即使我不小心拖动图像，我希望能够在两个图像之间切换/切换。

上线日期 由于使用OnClick和MouseUp事件在图像之间切换很多并发症。我用计时器显示图像100ms然后我只用一个事件来处理所有事情？

function BirdClick() {
  document.getElementById("Bird1").src = "https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif";
}

//Mouse-Down
function BirdHit() {
  document.getElementById("Bird1").src = "https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif";
}

<img src="https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif" id="Bird1" style="width:100px;height:100px;" onclick="BirdClick()" onmousedown="BirdHit()" />

Answer 1

使用mousedown和mouseup事件在鼠标上下之间切换这两个图像。同时致电getImage1()以获取ondragend和onmouseleave中的第一张图片，以处理拖动事件和双击问题

＆＃13;

＆＃13;

function getDrag() {
        getImage1();
    }
function getImage1() {
        document.getElementById("Bird1").src = "https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif";

    }
	
    //Mouse-Down
    function getImage2() {
        document.getElementById("Bird1").src = "https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif";        
    }

＆＃13;

<img src="https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif" id="Bird1" style="width:100px;height:100px;" ondragend="getDrag()"  onmouseup="getImage1()" onmouseleave="getImage1()" onmousedown="getImage2()" />
<img src="https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif" style="width:0px;height:0px; visibility:hidden;" />

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将鼠标向上事件处理程序附加到正文，以将鸟重置为第一个。

document.body.addEventListener('mouseup', setBirdOne, false);

如果您不想拖动图片，可以添加ondragstart="return false"以防止它。

<强>更新

当指针离开图像时，最好切换回第一只鸟。这可以通过以下方式实现：

onmouseleave="setBirdOne()"

＆＃13;

＆＃13;

function setBirdOne() {
  document.getElementById("Bird1").src = "https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif";
}

function setBirdTwo() {
  document.getElementById("Bird1").src = "https://cms-assets.tutsplus.com/uploads/users/1112/posts/25209/image/animate-bird-slide-25.gif";        
}	

document.body.addEventListener('mouseup', setBirdOne, false);

＆＃13;

<img src="https://media.giphy.com/media/3ornjQQZhry6bF31CM/giphy.gif" id="Bird1" style="width:100px;height:100px;" ondragstart="return false" onmouseleave="setBirdOne()" onmousedown="setBirdTwo()" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

• 在mousedown上使用Event.preventDefault()以阻止浏览器拖动选择和其他默认内容
• 使用mouseup和mouseleave获取 hitEnd

var el = document.getElementById("Bird1");

var onHitStart = function(e) {
  e.preventDefault(); // Prevent selections for drag etc
  el.src = "//i.stack.imgur.com/v6Rlm.gif";
};
var onHitEnd = function() {
  el.src = "//i.stack.imgur.com/R4RoF.gif";
};

el.addEventListener("mousedown",  onHitStart);
el.addEventListener("mouseleave", onHitEnd);
el.addEventListener("mouseup",    onHitEnd);

#Bird1 {
  width: 100px;
  height: 100px;
}

<img id="Bird1" src="//i.stack.imgur.com/R4RoF.gif" />

即使鼠标离开el.addEventListener("mouseleave", onHitEnd);

，您也可以添加el来重置状态