将 'hover()' 更改为 'on("vmouseover")'，破坏脚本并输出 'undefined'答案

【问题标题】：Changing 'hover()' to 'on("vmouseover")', ruins script and outputs 'undefined'将 'hover()' 更改为 'on("vmouseover")'，破坏脚本并输出 'undefined'
【发布时间】：2019-01-25 12:45:36
【问题描述】：

尝试制作带有悬停预览的视频缩略图。一切都很顺利，但我正在尝试将第 7 行的 .hover(function() 切换为 .on("vmouseover", function()，以实现更好的移动悬停。但是一旦我做了这个简单的更改，脚本只会将“未定义”输出到<img> 源中。

福特 F250 供参考。

带有 hover() 的代码：

// JavaScript Document
$(document).ready(function() {
	var slideshowIntervalId = 0;
	var slideshowIndex = 0;


	$(".thumbnail").hover(function() {
		var slideshowImages = [
			"http://www.509autos.com/images.aspx/id-554270619/2017-ford-f250-619-p1.jpg", 
			"https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg",
			"https://file.kbb.com/kbb/vehicleimage/housenew/480x360/2018/2018-ford-f250%20super%20duty%20regular%20cab-frontside_ft2sdr1801.jpg",
			"https://cdn04.carsforsale.com/3/1005159/13302137/thumb/945421006.jpg"
		];
		var $image = $(this);
		$image.addClass("hover");
		$image.data("original-src", this.src);
		slideshowIntervalId = setInterval(function() {
			slideshowIndex = ++slideshowIndex % slideshowImages.length;
			$image.attr("src", slideshowImages[slideshowIndex]);
		}, 1000);
	},
	function() {
		$(this).removeClass("hover");
		this.src = $(this).data("original-src");
		clearInterval(slideshowIntervalId);
	});

});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

带有 on("vmouseover", .. 的代码：

// JavaScript Document
$(document).ready(function() {
	var slideshowIntervalId = 0;
	var slideshowIndex = 0;


	$(".thumbnail").on("vmouseover", function() {
		var slideshowImages = [
			"http://www.509autos.com/images.aspx/id-554270619/2017-ford-f250-619-p1.jpg", 
			"https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg",
			"https://file.kbb.com/kbb/vehicleimage/housenew/480x360/2018/2018-ford-f250%20super%20duty%20regular%20cab-frontside_ft2sdr1801.jpg",
			"https://cdn04.carsforsale.com/3/1005159/13302137/thumb/945421006.jpg"
		];
		var $image = $(this);
		$image.addClass("hover");
		$image.data("original-src", this.src);
		slideshowIntervalId = setInterval(function() {
			slideshowIndex = ++slideshowIndex % slideshowImages.length;
			$image.attr("src", slideshowImages[slideshowIndex]);
		}, 1000);
	},
	function() {
		$(this).removeClass("hover");
		this.src = $(this).data("original-src");
		clearInterval(slideshowIntervalId);
	});

});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

【问题讨论】：

我没有看到你的vmouseover。请发布Minimal, Complete, and Verifiable example，以便我们正确调试您的代码。如果你不为你的问题付出努力，人们就不会在他们的回答中付出努力;-)
PD：好的，你在我写评论的时候完成了 xD nice。

标签： javascript jquery html jquery-mobile

【解决方案1】：

问题是您向on("vmouseover") 事件添加了2 个函数。 hover() 方法接收两个函数，一个用于mouseover 事件，另一个用于mouseout 事件，但on() 方法并非如此，因为它不监听“对应”事件。

如果在on() 方法中添加2 个函数，它只会运行最后一个传递的函数。这可以使用console.log() 轻松测试并打开开发者工具（PROTIP：F12）：

// JavaScript Document
$(document).ready(function() {
    $(".thumbnail").on("vmouseover", function() {
        console.log("asd");
    },
    function() {
        console.log("asd2"); // Only this callback is executed.
    });
});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

要使其工作，您必须附加两个事件，vmouseover 和 vmouseout，如下所示：

// JavaScript Document
$(document).ready(function() {
	var slideshowIntervalId = 0;
	var slideshowIndex = 0;


	$(".thumbnail").on("vmouseover", function() {
		console.log("asd");
		var slideshowImages = [
			"http://www.509autos.com/images.aspx/id-554270619/2017-ford-f250-619-p1.jpg", 
			"https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg",
			"https://file.kbb.com/kbb/vehicleimage/housenew/480x360/2018/2018-ford-f250%20super%20duty%20regular%20cab-frontside_ft2sdr1801.jpg",
			"https://cdn04.carsforsale.com/3/1005159/13302137/thumb/945421006.jpg"
		];
		var $image = $(this);
		$image.addClass("hover");
		$image.data("original-src", this.src);
		slideshowIntervalId = setInterval(function() {
			slideshowIndex = ++slideshowIndex % slideshowImages.length;
			$image.attr("src", slideshowImages[slideshowIndex]);
		}, 1000);
	}).on("vmouseout", function() {
		console.log("asd2");
		$(this).removeClass("hover");
		this.src = $(this).data("original-src");
		clearInterval(slideshowIntervalId);
	});

});

.thumbnail {
  width:300px;
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<img src="https://hips.hearstapps.com/amv-prod-cad-assets.s3.amazonaws.com/images/media/267365/2008-ford-f-250-super-duty-4x4-crew-cab-diesel-v-8-photo-4826-s-original.jpg" class="thumbnail">
</body>

【讨论】：

您可以链接vmouseover 和vmouseout 的事件处理程序。
@hev1 是的，你可以，但想更明确地了解正在发生的事情。