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

Posted

技术标签:

【中文标题】将 \'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。 【参考方案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 是的，你可以，但想更明确地了解正在发生的事情。

以上是关于将 'hover()' 更改为 'on("vmouseover")'，破坏脚本并输出 'undefined'的主要内容，如果未能解决你的问题，请参考以下文章

React on Rails - 如何将登录链接更改为注销链接？

如何将文本“ON”和“OFF”添加到切换按钮

jquery on hover事件怎么写

使用 Cast on Left Join 将 VARCHAR 更改为 DECIMAL

将 QListWidgetItem CheckState(toggled on) 上的默认 plastique 小部件样式更改为右勾而不是交叉勾

FireBug 1.7.3 - 关闭 Break On Next，更改为 Break On Error？