В safari на мобильном телефоне нужно 2 клика вместо одного

214
19 апреля 2017, 13:11

Добрый день. Есть сайт http://sportzakupka.ru/goods/sport_iskusstvenaya_trava/ Если зайти с iphone из браузера safari, то рейтинг можно выставить лишь 2-мя кликами по звезде. Первый имитирует hovaer, второй - click. На ПК все работает как надо.

Вот код

jQuery(document).ready(function(){ 
 
jQuery(".rq_a .productRate").hover ( 
function(){ 
	jQuery(this).append("<span></span>"); 
}, 
function() 
{ 
	jQuery(this).find("span").remove(); 
}); 
 
 
var rating; 
 
jQuery(".rq_a .productRate").mousemove ( 
function(e){ 
	if (!e) e = window.event; 
 	if (e.pageX){ 
	       x = e.pageX; 
	        } else if (e.clientX){ 
	        x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; 
 
	    } 
	    var posLeft = 0; 
	    var obj = this; 
	   while (obj.offsetParent) 
	    { 
	        posLeft += obj.offsetLeft; 
	        obj = obj.offsetParent; 
	    } 
	    var offsetX = x-posLeft, 
			modOffsetX = 5*offsetX%this.offsetWidth; 
			rating = parseInt(5*offsetX/this.offsetWidth); 
 
		if(modOffsetX > 0) rating+=1; 
 
		jQuery(this).find("span").eq(0).css("width",rating*30+"px"); 
 
}); 
 
jQuery(".rq_a .productRate").click ( 
function() 
{ 
	var vv = $(this).parent().attr( "id" ); 
	var d = vv.replace('rql', 'rq_');	 
	$('#' + d).val(rating); 
 
	rt = rating*20; 
	jQuery(this).html("<div style=\"width: " + rt + "%\"></div>"); 
	return false; 
}); 
 
});
.productRate { 
	background: url(http://sportzakupka.ru/templates/sportzakupka//images/stars.png); 
	width: 150px; 
	height: 30px; 
	position: relative; 
} 
.productRate div { 
	background: url(http://sportzakupka.ru/templates/sportzakupka//images/stars.png) left bottom; 
	width: 0; 
	height: 100%; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 1; 
	cursor: pointer; 
} 
.productRate span { 
	display: block; 
	height: 100%; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 2; 
	background: url(http://sportzakupka.ru/templates/sportzakupka//images/stars.png) left center; 
	width: 0; 
	cursor: pointer; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<table width="100%" cellspacing="0" cellpadding="0" border="0" id="prodrevsent"> 
 
			 
 
 
 
 
           <tbody><tr> 
	         <td> 
               <b>Внешний вид</b> 
	         </td> 
	         <td id="rql1" class="rq_a"> 
 
	<div class="productRate"> 
	    <div style="width: 100%"></div>		 
	</div>	 
	<input name="rq[1]" id="rq_1" type="hidden" class="rfield" value="5">		 
	 
			 </td> 
           </tr> 
 
 
 
           <tr> 
	         <td> 
               <b>Фиксация волокна</b> 
	         </td> 
	         <td id="rql2" class="rq_a"> 
 
	<div class="productRate"> 
	    <div style="width: 100%"></div>		 
	</div>	 
	<input name="rq[2]" id="rq_2" type="hidden" class="rfield" value="5">		 
	 
			 </td> 
           </tr> 
 
 
 
           <tr> 
	         <td> 
               <b>Качество основы</b> 
	         </td> 
	         <td id="rql3" class="rq_a"> 
 
	<div class="productRate"> 
	    <div style="width: 100%"></div>		 
	</div>	 
	<input name="rq[3]" id="rq_3" type="hidden" class="rfield" value="5">		 
	 
			 </td> 
           </tr> 
 
 
 
           <tr> 
	         <td> 
               <b>УФ стойкость</b> 
	         </td> 
	         <td id="rql4" class="rq_a"> 
 
	<div class="productRate"> 
	    <div style="width: 100%"></div>		 
	</div>	 
	<input name="rq[4]" id="rq_4" type="hidden" class="rfield" value="5">		 
	 
			 </td> 
           </tr> 
 
 
 
           <tr> 
	         <td> 
               <b>Удобство монтажа</b> 
	         </td> 
	         <td id="rql5" class="rq_a"> 
 
	<div class="productRate"> 
	    <div style="width: 100%"></div>		 
	</div>	 
	<input name="rq[5]" id="rq_5" type="hidden" class="rfield" value="5">		 
	 
			 </td> 
           </tr> 
 
 
 
           <tr> 
	         <td> 
               <b>Цена / качество</b> 
	         </td> 
	         <td id="rql6" class="rq_a"> 
 
	<div class="productRate"> 
	    <div style="width: 100%"></div>		 
	</div>	 
	<input name="rq[6]" id="rq_6" type="hidden" class="rfield" value="5">		 
	 
			 </td> 
           </tr> 
 
 
 
 
 
 
		    
           <tr> 
	         <td valign="top">&nbsp;</td> 
	         <td valign="top"><input type="submit" name="send_opinion" id="send_opinion" value="Отправить" class="sub" onclick="save_pop_r_only('157'); return false;"></td> 
           </tr> 
         </tbody></table>

Помогите сделать так, чтобы на safari также срабатывало с 1-го клика

Answer 1

Решил вопрос таким образом. Для мобильных телефонов отключил выполнение кода

jQuery(".rq_a .productRate").hover ( 
function(){ 
	jQuery(this).append("<span></span>"); 
}, 
function() 
{ 
	jQuery(this).find("span").remove(); 
});

READ ALSO
Не срабатывает required у select в модальном окне

Не срабатывает required у select в модальном окне

Имеется следующая ситуация, есть на странице две кнопки, которые лежат рядом друг с другом Сформировать программу из краткосрочно плана...

220
background-position у картинки

background-position у картинки

Здравствуйте!

177
Не работает отправка данных из textarea tinymce

Не работает отправка данных из textarea tinymce

Ребзя,всем доброго времени сутокНа сайте есть textarea,данные из нее записываю в бд,установил редактор tinymce,и из-за него теперь не работает скрипт...

294
Переход с MySQL на MongoDB [требует правки]

Переход с MySQL на MongoDB [требует правки]

Доброго времени суток, коллеги! В данный момент занимаюсь связкой NodeJS + Express

211