this.content.querySelectorAll('.cell').forEach((cell) => {
let timer = null; // дескриптор отложенного обработчика одного клика
cell.addEventListener('click', (e) => {
if(timer)
clearTimeout(timer); // при каждом клике сбрасываем отложенный обработчик обработки одного клика
if(e.detail == 1) // на первом клике устанавливаем отложенный обработчик
timer = setTimeout(handleClickCell, 250); // Выполнение функции по одинарному клику после ожидания второго клика 250мс
if(e.detail == 2) // на втором - выполнение обработчика двойного клика
{
// благодаря счетчику detail в ивенте можем посчитать длину очереди непрерывных кликов, и в нужный момент выполнить функцию на втором клике
console.log('111');
}
} );
});адаптивности при таком раскладе не возможно добиться
p.s.: я думал сделать сеткой, т.е. типа как пазл картинка состоящая из одинаковых квадратиков (тогда это будет проще)
failed because the user didn't interact with the document first
function getValue()
{
let xhr = new XMLHttpRequest();
xhr.open("POST", "" /*<- тут должен быть адрес скрипта на сервере, где будет обработка запроса */, true);
// создаем виртуальную форму, чтобы нагрузить запрос параметрами
let t_form = new FormData();
// нагружаем параметром форму
t_form.append("input-id", document.getElementById('input-id').value);
// ... еще какой-то параметр
// t_form.append("какой-то параметр", "какое-то значение");
// callback функция ответа
xhr.onreadystatechange = function(e)
{
// состояние, когда ответ сформирован
if(xhr.readyState === 4 && xhr.status === 200)
{
// что-то делаем с ответом, например выводим сообщение
alert(xhr.responseText);
}
};
// отправляем запрос на сервер, нагружаем его формой с параметрами
xhr.send(t_form);
}// инициализация значений по умолчанию (тело конструктора, если использовать ООП. В классе будете использовать this контекст класса вместо window)
window.is_mouse_catch = false; // зажата ли мышь?
window.mouse_path = 0.0; // путь мыши
// предыдущие координаты мыши
window.cl_X = null;
window.cl_Y = null;
// конец инициализации
// обработчик нажатия кнопки
document.addEventListener('mousedown', function(e)
{
// фиксируем параметры мыши в переменных, за пределами локальной области видимости обработчика
window.is_mouse_catch = true;
window.mouse_path = 0.0;
window.cl_X = e.clientX;
window.cl_Y = e.clientY;
});
// обработчик отпускания кнопки
document.addEventListener('mouseup', function(e)
{
// фиксируем отпускание кнопки мыши в переменной, за пределами локальной области видимости обработчика
window.is_mouse_catch = false;
});
// обработчик движения мыши
document.addEventListener('mousemove', function(e)
{
// если кнопку не нажимали, то прерываем обработчик
if(window.is_mouse_catch === false)
return;
// определяем текущие координаты
let currentX = +e.clientX;
let currentY = +e.clientY;
// считаем дельту пути
let delta = ((currentX - window.cl_X) ** 2 + (currentY - window.cl_Y) ** 2) ** 0.5;
// приращиваем дельту пути к общему результату
window.mouse_path += delta;
// переопределяем предыдущие координаты
window.cl_X = currentX;
window.cl_Y = currentY;
// пишем в лог
console.log('currentX: ' + currentX + '; currentY: ' + currentY + ' delta: ' + delta + '; total_path: ' + window.mouse_path);
});var currentExtraStackFrame = null; // это нужно, чтобы не словить предупреждение в консоль undefined variable/property при обращении к свойству currentExtraStackFrame
// этим методом вы задаете какое-то значение для свойства currentExtraStackFrame, если его нужно привести в какое-то не null значение (или вернуть в null - значение по умолчанию).
function setExtraStackFrame(stack)
{
// if() тут может была лексема if, можно просто ее закомментить и не убирать скобки, чтобы git не анализировать их исправление, и так будет работать
{
currentExtraStackFrame = stack;
}
}такой способ представляет угрозу для безопасности
2 + 8 = ?
<?php
if(isset($_POST['checkout']))
{
// получили параметр, который используется в AJAX - отдаем только данные (числа, строки, или json объекты)
echo 'posted:'.$_POST['checkout'];
}
else
{
// не получили специфичных для ajax параметров - отдаем клиенту обычный HTML
echo '<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div><?php echo $test ?></div>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>';
}
?>$('.plus').click(function(e) {
checkNumber(
// про this - сюда вставьте указатель на ноду HTML - конкретный экземпляр инпут с классом намбер, который будете проверять. Будьте внимательны, если на странице несколько input.number, возможно, выбранный вами способ будет захватывать первый попавшийся input.number. Добейтесь того, чтобы захватывался только тот намбер, соседом которого является плюс или минус (можно через родительский контейнер вычислить это).
// про event. Возможно, возможно, внутри реализации checkNumber, допустим есть отмена действия по умолчанию, или остановка всплытия события, посмотрите, будет ли отличия от события oninput на намбере. Можно попробовать передать указатель события клика от плюса/минуса (обратите внимание на аргумент e в function(e) )
// про '1' - если заглянуть в хрустальный шар - реализацию функции checkNumber, то можно предположить, что это значение по умолчанию или минимальное значение поля input.number )
});let setSpeedToUpHandler = function(e)
{
if(e.key === " "){
document.removeEventListener("keydown", setSpeedToUpHandler); // удаляем текущий обработчик с этого типа события
setMovementSpeedToSpeedUp(); // увеличиваем скорость персонажа
};
};
let setMovementSpeedToNormalHandler = function(e)
{
if(e.key === " "){
document.removeEventListener("keyup", setMovementSpeedToNormalHandler); // удаляем текущий обработчик с этого типа события
setMovementSpeedToNormal(); // устанавливаем скорость на нормальное значение
};
};
document.addEventListener("keydown", setSpeedToUpHandler);
document.addEventListener("keyup", setMovementSpeedToNormalHandler);$page_path = ['page1', 'subpage2'];$site_menu =
[
'page1' =>
[
'title' => 'Страница 1',
'child' =>
[
'subpage2' => ['title' => 'Субстраница 2', 'child' => []]
]
],
'page2' =>
[
'title' => 'Страница 2',
'child' => []
],
];// рекурсивная функция для получения сверстанного меню из структуры
function get_main_menu(
$curr_menu, //часть меню текущего уровня
$level, // номер текущего уровня
$menu_path, // путь к текущему уровню меню
&$page_path // путь к текущей странице
)
{
$out = '';
if(count($curr_menu) > 0)
{
$out .= '<ul class="main-menu main-menu_level-'.$level.'">';
foreach($curr_menu as $key_item => $menu_item)
{
$out .= '<li class="main-menu__item '
.($page_path[$level] == $key_item ? 'main-menu__curent' : '') // определяем текущий пункт меню
.'"><a href="'.$menu_path.'/'.$key_item.'">'.$menu_item['title'].'</a>';
get_main_menu($curr_menu['child'], $level + 1, $menu_path.'/'.$key_item, $page_path); // рекурсивный вызов функции для прорисовки следующего уровня
$out .= '</li>';
}
$out .= '</ul>';
}
return $out;
}
// получаем html-фрагмент меню по структуре
$out_site_menu = get_main_menu($site_menu, 0, '', $page_path);