我正在重新设计一个电子商务网站，该网站具有用于显示购物车项目的鼠标悬停事件。我不熟悉jquery或javascript。最初它显示：无，所以当我悬停然后jquery进入行动（显示：块）。现在我想在移动视图中禁用鼠标悬停事件。任何人都可以帮忙吗？
以下是使用的脚本
window['$cartItems'] = [];
$(".carts").mouseover(function(){
if(window['$cartItems'].length===0){
$.ajax({
url: 'index.php?route=common/header/getProducts',
dataType: 'json',
success: function(json) {
var data=json.items;
window['$cartItems'] = data;
var html='';
if(Object.keys(data).length==0)
{
if (window.innerWidth > 768) {
console.log("find");
$('p#empt').html('Your shopping cart is empty');
$('.cart-info').hide();
$('p#empt').show();
}
}
else
{
$('p#empt').hide();
$('.cart-info').show();
$.each(data,function(i,ele){
html+='<tr style="height: 30px !important;width:400px;position:absolute;top: 34px;right: 166px;z-index: 99999; background-color:#FFFFFF; display:none"">'
+'<td colspan="6" style="border:none;">'
+'<image src="catalog/view/theme/default/image/reorder.png" alt="" title="" style="float:left;" />'
+'<span style="float:left;line-height:18px; margin-left:10px;">'
+'<small></small>'
+'</td>'
+'</tr>'
+'<tr style="border-bottom:1px solid #f4f4f4; height: 30px !important;">'
+'<td class="name text-center">'
+'<small>'+ele.name+'</small>'
+'</td>'
+'<td class="quantity text-center">'
+'<small>'+ele.quantity+'</small>'
+'</td>'
+'<td class="total text-center"><small>'+ele.total+'</small></td>'
+'<td class="text-center">'
+ '<a href="http://www.cronaz.com/index.php?route=checkout/cart&remove='+ele.key+'">'
+'<img src="catalog/view/theme/default/image/remove.png" alt="" width="15" height="15" title="Remove" /></a>'
+'</td>'
+'</tr>';
});
$('#cartitems').html(html);
}
}
});
}
$(".minicart").css("display","block");
});
$(".carts").mouseleave(function(e) {
$(".minicart").css("display","none");
});
这里是php代码
<li class="carts">
<a title="<?php echo $text_shopping_cart; ?>" href="<?php echo $shopping_cart; ?>"><span class="glyphicon glyphicon-shopping-cart cart-icon"><span class="count newton" id="cart-total"><?php // echo count($this->cart->getProducts());?></span></span></a>
<div class="minicart">
<p id="empt"></p>
<?php $products=$this->cart->getProducts(); ?>
<div class="cart-info" style="display:none;" >
<table class="table-responsive" width="100%">
<thead bgcolor="#f4f4f4">
<tr style="height: 30px !important;">
<td class="name text-center"><b><small>Product Name</small></b></td>
<td class="quantity text-center"><b><small>Quantity</small></b></td>
<!--<td class="price text-center fs14"><b><strong>Unit Price</strong></b></td>-->
<td class="total text-center"><b><small>Total</small></b></td>
<td class="total text-center"><b><small>Remove</small></b></td>
</tr>
</thead>
<tbody id="cartitems">
<?php foreach ($products as $product) { ?>
<?php if($product['recurring']): ?>
<tr style="height: 30px !important;">
<td colspan="6" style="border:none;">
<img src="catalog/view/theme/default/image/reorder.png" alt="" title="" style="float:left;" />
<span style="float:left;line-height:18px; margin-left:10px;">
<small><?php echo $text_recurring_item ?></small>
<?php echo $product['profile_description'] ?>
</td>
</tr>
<?php endif; ?>
<tr style="border-bottom:1px solid #f4f4f4; height: 30px !important;">
<td class="name text-center">
<small><?php echo $product['name']; ?></small>
</td>
<!-- <td class="model text-center product-name"><?php echo $product['model']; ?></td>-->
<td class="quantity text-center">
<small><?php echo $product['quantity']; ?></small>
<!-- <input type="text" readonly name="quantity[<?php echo $product['key']; ?>]" value="<?php echo $product['quantity']; ?>" size="1" />-->
<!--
<input type="image" src="catalog/view/theme/default/image/update.png" alt="<?php echo $button_update; ?>" title="<?php echo $button_update; ?>" />-->
</td>
<!--<td class="price text-center"><?php echo $product['price']; ?></td>-->
<td class="total text-center"><small><?php echo $product['total']; ?></small></td>
<td class="text-center"> <a href="<?php echo HTTP_SERVER .'index.php?route=checkout/cart&remove='.$product['key'] ?>">
<img src="catalog/view/theme/default/image/remove.png" alt="" width="10" height="10" title="Remove" /></a>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</li>
答案 0 :(得分：0)
您不会禁用onmouseover事件。您只需在触发该事件时检查端口视图大小。
在$(".carts").mouseover(function(){内的代码中，您必须将所有内容都包含在if语句中，以检查端口视图的大小。
$(".carts").mouseover(function(){
if(window.innerWidth > 768){
//put all your code here...
}
}
我不确定这是不是你的问题，但我发现你差不多了。