Форумы портала PHP.SU :: Версия для печати

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: onclick внутри onclick

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » onclick внутри onclick

Страниц (1): [1]

1. Hishchnik - 19 Декабря, 2013 - 10:04:17 - перейти к сообщению

CODE (html):
скопировать код в буфер обмена

<div class="Lists" onclick="onImg(\'on\',\''.$lists['name'].'.'.$lists['ext'].'\')" style="width:'.$w.'px;height:'.$h.'px;background-image: url('.$lists['files'].');background-size: '.$w.'px '.$h.'px;background-position: center center;background-repeat: no-repeat;">
<a class="foto_del" onclick="onImg(\'del\',\''.$lists['name'].'.'.$lists['ext'].'\')" style="visibility: visible;">delete</a>
</div>

CODE (javascript):
скопировать код в буфер обмена

onImg function(a,b){
alert(a+": "+b);}

div с фоновой картинкой, так же кнопка удаления в углу(предыстория)
при нажатии на фон сообщение только по "on"
при нажатии на кнопку, сначала "del" потом "on"

вопрос: Как разделить события?

2. Invert - 19 Декабря, 2013 - 10:14:54 - перейти к сообщению

Попробуйте тег ссылки разместить за пределами div, и подогнать ссылку через css в нужное место (position: relative; left: ?; top: ?;)

3. Hishchnik - 19 Декабря, 2013 - 10:32:59 - перейти к сообщению

Invert пишет:

идея хорошая, пытался так делать, но дело в том, что этот кусок кода повторяется для вывода информации через "foreach" а позиция может меняться, думал, как вариант,

CODE (htmlphp):
скопировать код в буфер обмена

 
<div class="Lists">
<div onclick></div>
<div onclick></viv>
<div>
 

сделать, вот только первый внутренний нужен 100% площади div=Lists, а второй только кусочек div=Lists
то бишь, чего добиваюсь: кнопка удаления в углу фотографии(одно событие), при нажатии на любое место фото срабатывает другое событие

4. Invert - 19 Декабря, 2013 - 10:50:31 - перейти к сообщению

Я понял. Как вариант можно отказаться от onclick в пользу обработки событий через jQuery. Будет чище и понятнее код.

К примеру блоки будут выглядеть так:

CODE (html):
скопировать код в буфер обмена

 
<div class="Lists" data-param="$param">
    <a class="foto_del">delete</a>
</div>
 

Вешаете обработчики событий:

PHP:
скопировать код в буфер обмена

 
$( '.Lists' ).click( function () {
     // Это клик по блоку. Получаем данные и делаем что нужно
});
 
$( '.foto_del' ).click( function () {
     // Это клик по кнопке удаления. Получаем данные и делаем что нужно
});
 

Попробуйте. Это куда проще, чем ваш вариант.

5. Hishchnik - 19 Декабря, 2013 - 11:06:46 - перейти к сообщению

Invert пишет:

CODE (html):
скопировать код в буфер обмена

 
<div class="Lists" data-param="$param">
    <a class="foto_del">delete</a>
</div>
 

в том то и дело, что при нажатии на ссылку, срабатывает и событие div'a $( '.Lists' ).click( function ()
даже если с ссылки вообще убрать событие, и поставить только $( '.Lists' ) при нажатии на ссылку

CODE (htmlphp):
скопировать код в буфер обмена

<a class="foto_del" style="visibility: visible;">delete</a>

происходит срабатывание @Lists@

6. Invert - 19 Декабря, 2013 - 11:16:34 - перейти к сообщению

Hishchnik пишет:

в том то и дело, что при нажатии на ссылку, срабатывает и событие div'a $( '.Lists' ).click( function ()

Точно.

Тогда используйте отдельные слои для событий, как вы писали ранее:

CODE (html):
скопировать код в буфер обмена

 
<div class="Lists">
<div onclick></div>
<div onclick></viv>
<div>
 

7. IllusionMH - 19 Декабря, 2013 - 11:17:22 - перейти к сообщению

Hishchnik, return false в конце обработчика клика по ссылке.
еще смотрите в сторону event.stopPropagation()

8. Invert - 19 Декабря, 2013 - 11:20:20 - перейти к сообщению

IllusionMH пишет:

return false

Точно. IllusionMH дело говорит.

9. esterio - 19 Декабря, 2013 - 12:00:03 - перейти к сообщению

ну и также

CODE (javascript):
скопировать код в буфер обмена

e.preventDefault();

http://stepansuvorov[dot]com/blog/20[dot][dot][dot]iatepropagation/

10. IllusionMH - 19 Декабря, 2013 - 12:03:25 - перейти к сообщению

esterio, return false = e.preventDefault() + e.stopPropagation(). И в данном случае подходит.

11. esterio - 19 Декабря, 2013 - 13:03:10 - перейти к сообщению

IllusionMH
Не знаю, chrome материться на устаревшую конструкцию, если return false. Хотя тут дело привичкы, ведь результат одинаков.

12. IllusionMH - 19 Декабря, 2013 - 13:20:40 - перейти к сообщению

esterio, он матерится сразу при загрузке, т.к. этот параметр проверяется в любом событии через ||. Я бы сказал что это "проблема" самого jQuery, который проверяет это значение у события.
Просто V8 выводит сообщения если устаревшие методы/свойств вызываются, а в 1.x еще осталась поддержка старых ИЕ.
Если попробовать глянуть что в этой строке после return false; то можно увидеть что это не влияет на параметр src.returnedValue
http://take[dot]ms/vOJXn

13. Hishchnik - 19 Декабря, 2013 - 14:47:57 - перейти к сообщению

пост снят с отображения

14. Hishchnik - 19 Декабря, 2013 - 17:15:48 - перейти к сообщению

Вопрос снимается, доизвращался до такого:

CODE (html):
скопировать код в буфер обмена

.List{float:left;display:block;background:#EFEFEF;border:1px solid #D5DFE5;padding:3px;margin:2px;}
.List:hover {float:left;display:block;background:#FFFFFF;border:1px solid #3399FF;padding:3px;margin:2px;}
.List .foto_del{width:18px;height:18px;position:relative;top:-5px;right:-45px;background:url(img/icon/del_icon.png) no-repeat 0 0;cursor:pointer;display:inline-block;text-indent:-999em;visibility:hidden;z-index:999}
.List .bgimg{position:relative;top:-18px;}
 
 
<div class="List" style="width:'.$w.'px;height:'.$h.'px;">
<div class="foto_del" onclick="onImg(\'del\',\''.$lists['fname'].'\'); return false;" style="visibility: visible;">delete</div>
<a onclick="return true;">
<img class="bgimg" style="width:'.$w.'px;height:'.$h.'px;" onclick="onImg(\'on\',\''.$lists['fname'].'\')" src="'.$lists['files'].'" />
</a>
</div>
 

вот теперь всё как надо Закатив глазки

Что получилось в прикрепленном файле(2 нажатия на разные ссылки)