а какой тогда смысл в параметре true или false здесь: addEventListener('click',allert,false)?
Получается он(параметр true или false) вообще не нужен если мы его прописываем отдельными строками кода.
Вопросы по диску «Javascript. Больше, чем просто сайт!»
Автор темы
Гость_Вадим Шумский_*
, 16 май 2010 10:47
Сообщений в теме: 69
#42
Отправлено 27 Июль 2010 - 23:28
Смысл этого параметра в том, что Вы сами можете определить когда должен сработать обработчик: на этапе «проседания» (true) события или на этапе его «всплытия» (false)а какой тогда смысл в параметре
Отдельными строками (выше) мы останавливали сам процесс «проседания»/«всплытия».мы его прописываем отдельными строками кода
#43
Отправлено 28 Июль 2010 - 07:55
Всё таки я что то не понимаю, вот код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
height: 2500px;
}
#div {
width: 300px;
height: 150px;
background: green;
position: absolute;
}
#div2 {
width: 150px;
height: 75px;
background: red;
}
</style>
<body id="bodyy">
<div id="div"><div id="div2"></div></div>
<script type="text/javascript">
window.onload = function() {
document.getElementById('bodyy').addEventListener('click',allertBody,true);
document.getElementById('div2').addEventListener('click',allert,false);
}
function allert() {
alert('click по DIV!');
}
function allertBody() {
alert('click по BODY!');
}
</script>
</body>
</html>
При клике по боди событие должно заворачиваться и функция allert тоже должна выполняться, но так не происходит.
объясните подробнее чтобы я понял, пожалуйста.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
body {
height: 2500px;
}
#div {
width: 300px;
height: 150px;
background: green;
position: absolute;
}
#div2 {
width: 150px;
height: 75px;
background: red;
}
</style>
<body id="bodyy">
<div id="div"><div id="div2"></div></div>
<script type="text/javascript">
window.onload = function() {
document.getElementById('bodyy').addEventListener('click',allertBody,true);
document.getElementById('div2').addEventListener('click',allert,false);
}
function allert() {
alert('click по DIV!');
}
function allertBody() {
alert('click по BODY!');
}
</script>
</body>
</html>
При клике по боди событие должно заворачиваться и функция allert тоже должна выполняться, но так не происходит.
объясните подробнее чтобы я понял, пожалуйста.
#44
Отправлено 28 Июль 2010 - 12:14
При «проседании» событие опускается от корневого элемента до того, с которого событие было сгенерировано, а при всплытии поднимается от элемента-инициатора до корневого.
При клике по body событие «проседает» до самого себя, и «всплывает», соответственно, тоже.
При клике по div событие «проседает» от body до себя, а всплывает от себя до body.
При клике по body событие «проседает» до самого себя, и «всплывает», соответственно, тоже.
При клике по div событие «проседает» от body до себя, а всплывает от себя до body.
#46
Отправлено 29 Июль 2010 - 19:45
Денис, что у меня здесь не правильно. Тренируюсь копируя курс, но не появляется окошко "Вы хотите покинуть страницу?",сразу идет переход на сайт.
window.onload = initlinks;
function initlinks () {
var links = document.getElementsByTagName('a');
for (var i=o; i < links.length; i++) {
if (links.item (i).href.toLowerCase ().indexOf ('http://' + document.domain) != 0) {
links.item (i).onclick = linkClick;
}
}
}
function linkClick () {
if (confirm ('Вы хотите покинуть страницу?'))
return true;
return false;
}
window.onload = initlinks;
function initlinks () {
var links = document.getElementsByTagName('a');
for (var i=o; i < links.length; i++) {
if (links.item (i).href.toLowerCase ().indexOf ('http://' + document.domain) != 0) {
links.item (i).onclick = linkClick;
}
}
}
function linkClick () {
if (confirm ('Вы хотите покинуть страницу?'))
return true;
return false;
}
Сообщение отредактировал Света: 29 Июль 2010 - 19:46
#47
Отправлено 31 Июль 2010 - 13:46
именно в этом коде ошибка в объявлении цикла:не появляется окошко "Вы хотите покинуть страницу?"
for (var i=0; i < links.length; i++)у Вас вместо 0(нуль) была набрана буква «о».
#48
Отправлено 03 Август 2010 - 07:30
В уроке по примерам, где делается меню-оглавление мне не понятно почему переменная i должна увеличиваться на 3, что с того что сущность elements.length динамична, условие цикла всё равно верное и всё должно выполняться, вроде.
#49
Отправлено 03 Август 2010 - 10:33
увеличить счетчик на 3 нужно т.к. мы добавили 3 элемента перед текущим по индексу.почему переменная i должна увеличиваться на 3
Стас, а Вы поэксперементируйте.условие цикла всё равно верное и всё должно выполняться, вроде.
Скрипт зациклится: дойдет до первого header-элемента, перед ним добавятся еще 3, счетчик сдвинется на 1 и через 2 шага мы снова окажемся у того же header-элемента. И так бесконечно.
#50
Отправлено 07 Август 2010 - 14:06
А у меня еще такой вопрос: Вот код
<body>
<p onclick="f();">COLOR</p>
<script type="text/javascript">
function f() {
this.style.backgroundColor = 'green';
}
</script>
</body>
вот второй вариант кода
<body>
<p id="j">COLOR</p>
<script type="text/javascript">
document.getElementById('j').onclick = f;
function f() {
this.style.backgroundColor = 'green';
}
</script>
</body>
Почему в первом варианте код не работает а во втором работает и backgroundColor становится зелёным, хотя в файербаге во вкладке сценарий отладчик кода в обоих случаях относит this к тегу <p>?
<body>
<p onclick="f();">COLOR</p>
<script type="text/javascript">
function f() {
this.style.backgroundColor = 'green';
}
</script>
</body>
вот второй вариант кода
<body>
<p id="j">COLOR</p>
<script type="text/javascript">
document.getElementById('j').onclick = f;
function f() {
this.style.backgroundColor = 'green';
}
</script>
</body>
Почему в первом варианте код не работает а во втором работает и backgroundColor становится зелёным, хотя в файербаге во вкладке сценарий отладчик кода в обоих случаях относит this к тегу <p>?
#51
Отправлено 08 Август 2010 - 01:02
В первом варианте this — неопределен. (Проверьте еще раз)Почему в первом варианте код не работает, хотя в обоих случаях относит this к тегу <p>?
Чтобы код работал можно использовать объект события:
<body>
<p onclick="f(evt)">COLOR</p>
<script type="text/javascript">
function f(evt) {
evt.target.style.backgroundColor = 'green';
}
</script>
</body>
#52
Отправлено 22 Сентябрь 2010 - 20:52
Здравствуйте!
Написал такой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Mollio.org</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#mainMenu {
position: absolute;
top: 0;
left: -120px;
width: 150px;
height: 150px;
background-color: red;
}
</style>
<script type="text/javascript">
var open = 0;
var slideSpeed = 10;
var object = null;
function setMenu(evt) {
object = document.getElementById('mainMenu');
if(open) {fx = -120; cx = 0; open = 0;}
else {fx = 0; cx = -120; open = 1;}
slideMenu(cx,fx);
var evt = event || window.event;
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
function slideMenu(cx,fx) {
if(cx != fx) {
if(cx > fx) {cx -= slideSpeed;}
else{cx += slideSpeed;}
object.style.left = cx + 'px';
setTimeout('slideMenu('+cx+','+fx+')',10); }
return;
}
</script>
</head>
<body>
<div id="mainMenu"><button>Button</button></div>
<script type="text/javascript">
window.onload = function() {
document.getElementById('mainMenu').addEventListener('mouseover',setMenu,false);
document.getElementById('mainMenu').addEventListener('mouseout',setMenu,false);
}
</script>
</body>
</html>
Проблема в том что при наведении курсора на кнопку меню сворачивается, как сделать так чтобы при наведении мыши на кнопку меню не сворачивалось?
Написал такой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Mollio.org</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
#mainMenu {
position: absolute;
top: 0;
left: -120px;
width: 150px;
height: 150px;
background-color: red;
}
</style>
<script type="text/javascript">
var open = 0;
var slideSpeed = 10;
var object = null;
function setMenu(evt) {
object = document.getElementById('mainMenu');
if(open) {fx = -120; cx = 0; open = 0;}
else {fx = 0; cx = -120; open = 1;}
slideMenu(cx,fx);
var evt = event || window.event;
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
function slideMenu(cx,fx) {
if(cx != fx) {
if(cx > fx) {cx -= slideSpeed;}
else{cx += slideSpeed;}
object.style.left = cx + 'px';
setTimeout('slideMenu('+cx+','+fx+')',10); }
return;
}
</script>
</head>
<body>
<div id="mainMenu"><button>Button</button></div>
<script type="text/javascript">
window.onload = function() {
document.getElementById('mainMenu').addEventListener('mouseover',setMenu,false);
document.getElementById('mainMenu').addEventListener('mouseout',setMenu,false);
}
</script>
</body>
</html>
Проблема в том что при наведении курсора на кнопку меню сворачивается, как сделать так чтобы при наведении мыши на кнопку меню не сворачивалось?
#54
Отправлено 07 Октябрь 2010 - 14:31
Дело в том, что при переходе курсора на любой эелемент внутри целевого div-а и обратно срабатывают события mousdeover и mouseout.Проблема в том что при наведении курсора на кнопку меню сворачивается, как сделать так чтобы при наведении мыши на кнопку меню не сворачивалось?
Следовательно нужно отследить эти состояния и блокировать вызовы функции-аниматора.
Для удобства написана функция inList, которая выполняет поиск заданного элемента (аргумент №2) в заданной коллекции (аргумент №1). Возвращает true, если элемент есть и false, если его нет в коллекции.
function setMenu(event) {
object = document.getElementById('mainMenu');
var list = object.getElementsByTagName('*');
var evt = event || window.event;
var fromElt = evt.relatedTarget || evt.fromElement; // при событии mouseover отслеживаем элемент С которого приушел курсор
var toElt = evt.relatedTarget || evt.toElement; // при событии mouseout отслеживаем элемент НА который ушел курсор
var targetElt = evt.target || evt.srcElement; // отслеживаем элемент на котором сгенерировано событие
// 1) курсор переведен на один из внутренних элементов целевого div-а
// 2) курсор переведен с одного из внутренних элементов на целевой div
if((inList(list, targetElt) && fromElt == object) || (targetElt == object && inList(list, toElt)))
return false;
if(open) {
fx = -120;
cx = 0;
open = 0;
} else {
fx = 0;
cx = -120;
open = 1;
}
slideMenu(cx,fx);
evt.stopPropagation ? evt.stopPropagation() : evt.cancelBubble = true;
}
function inList(list, value) {
var i;
for (i=0; i < list.length; i++) {
if (list[i] == value) {
return true;
}
}
return false;
};
#55
Отправлено 28 Январь 2011 - 21:00
Добрый день!
Насколько я понял, Вы хотите определить вид браузера, с которым работаете.
Так, как каждый браузер описывает объект document немного по-разному,
то проведя не которые тесты мы сможем определить, с каким именно имеем дело.
Суть экспериментов заключается в том, чтобы определить, обладает ли объект document
теми или иными свойствами/методами. Если, например, объект document обладает свойством document.layers,
то данная кострукция, логически будет интерпретирована, как true, если же не обладает, то как false.
В Mozilla и Webkit истинной будет такая конструкция:(document.getElementById && !document.all)В IE истинным будет:(document.all)
P.S.
Стоит помнить о том, что от версии к версии разработчики могут как добавлять поддержку новых свойств, так и убирать поддержку редко используемых.
Я решил этот вопрос так определяем браузер
#56
Отправлено 11 Июль 2011 - 18:32
Доброе время суток!
Имеется вопрос по обсуждению технических нюансов, появляющихся в последующем разборе языка. А именно работа с библиотекой JQuery.
Так вот имеют ли место быть вопросы по данной теме и их последующий разбор. Если да то в каком контексте и с помощью каких средств общения(тут в закрытой части или же средствами обмена личных сообщений).
Заранее благодарю за разъяснение!
Имеется вопрос по обсуждению технических нюансов, появляющихся в последующем разборе языка. А именно работа с библиотекой JQuery.
Так вот имеют ли место быть вопросы по данной теме и их последующий разбор. Если да то в каком контексте и с помощью каких средств общения(тут в закрытой части или же средствами обмена личных сообщений).
Заранее благодарю за разъяснение!
Только тот свет реален от которого душа пробуждаясь ломает все преграды, темницы и тюрьмы.
#58
Отправлено 12 Июль 2011 - 08:06
Ну тогда есть такой проект sc-sh.ru.Добрый вечер.
Конечно, почему нет?
Лучше будет на форуме.
В нём работает всё как надо за исключением листалки картинок и корзины. Вопрос следующий как правельно очистить содержимое блока - допустим корзины чтобы загружаемые в него DOM элементы были доступны всегда.
вот код:
function buy()
{
$('.detect a.bays').click(function(){
$.ajax({
type: "GET",
url: "./motor/busket.php"+$(this).attr("href"),
success: function(res){
$("#tabl").remove();
var tbPanel = '<div id="tabl"> Загрузка! </div>';
$("#basket").css("background-position","100% 0px");
$("#basket").append(tbPanel);
$("#basket").animate({width: "400px"},100);
$("#basket").animate({height: "300px"},200);
$("#tabl").html(res);
$("input:text").keyup(function()
{
$(this).val(
function(index,x){
$.ajax({
type: "GET",
url: "./motor/busket.php?nnum="+$(this).attr("name")+"&col="+x,
success: function(res){
$("#tabl").html(res);
}});
}
);
});
}
});
return false;
});
}
buy();
весь код можно просмотреть непосредственно на сайте...
Только тот свет реален от которого душа пробуждаясь ломает все преграды, темницы и тюрьмы.
#59
Отправлено 13 Июль 2011 - 03:57
Честно говоря не совсем понял, чего именно Вы желаете добиться.как правильно очистить содержимое блока, чтобы загружаемые в него DOM элементы были доступны всегда
Но для того, чтобы в блоке ничего не было, а находящиеся ранее в нем элементы были доступны для манипуляций
достаточно просто перенести их в другое место, например в невидимый блок.
см.: .insertAfter()
#60
Отправлено 13 Июль 2011 - 06:56
Честно говоря не совсем понял, чего именно Вы желаете добиться.
Но для того, чтобы в блоке ничего не было, а находящиеся ранее в нем элементы были доступны для манипуляций
достаточно просто перенести их в другое место, например в невидимый блок.
см.: .insertAfter()
Допустим у нас есть <div></div> - в него мы загружаем элементы формы из $.ajax метода библиотеки JQUERY, этот метод привязан к событию click на другом элементе. То есть мы получаем доступ к загруженным в div элементам формы только после того как отработает $.ajax.
Эта ситуация приемлема и работает только в случае если мы получаем один раз доступ к загружаемым элементам формы. Но если нам нужно данную операцию производить n кол-во раз то при следующей загрузке (2ой) доступ к элементам формы исчезает, хотя структура DOM остаётся прежней. Как решить эту ситуацию?
И вообще как решать подобные ситуации, я воюю с этим уже неделю(ну естественно в свободное от работы время), и никак не могу найти на него хотя бы
приблизительно верный ответ.
В качестве примера на сайте www.sc-sh.ru при заказе товара(при нажатии на маленькую корзинку под картинкой товара) открывается блок корзины в который загружается таблица с наименованием товара, и в свою очередь для манипуляции заказанным товаром в ней присутствуют 2а элемента формы (text и button). При заказе товара работает только элемент text (первый раз, после обновления контента уже ничего не работает), а когда мы скрываем затем заново открываем элемент корзины щелчком по ней мыши активируется доступ к удалению строки. Отсюда и выше изложенный вопрос.
Заранее благодарю за помощь!
Только тот свет реален от которого душа пробуждаясь ломает все преграды, темницы и тюрьмы.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 скрытых пользователей
