Выдвижная панель

@rean1mator · Регистрация: 19.01.2011

Студворк — интернет-сервис помощи студентам

Доброго времени суток!

Как истинный новичек в JS сижу и уже долго ломаю голову над самой простой выдвижной панелью обратной связи.
Задача такая: изначально панель спрятана за пределы экрана и торчит только край, по нажатию на который панель выезжает. Чтоб панель спрятать, нужно кликнуть на тот же край.
Осилил таки сделать, чтоб панелька выдвигалась и пряталась, вот только незадача, если нажать на любое поле в форме, то панель прячется.

Мои исходники:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
function feedback (elem){
        var right = parseInt(window.getComputedStyle(elem, null).right);
        if(right < 0){
            function frameforward (){
                elem.style.right = right + 'px';
                right = right + 7;
                if (right > 0){
                clearInterval(timerforward);}
                elem.style.right = right + 'px';}
                var timerforward = setInterval(frameforward, 1);}
            
        else {
            function frameback (){
            elem.style.right = right + 'px';
            right = right - 5;
            if (right < -285){
            clearInterval(timerback);}
            elem.style.right = right + 'px';}
            var timerback = setInterval(frameback, 1);} 
}
</script>
<body>
<div class="mainBox"  onClick="feedback (this)">
    <div class="subBox"></div>
        <div id="formBlock">
            <form name="form1">
                <label>Имя пользователя</label><br>
                <input type="text" name="user" title="Имя пользователя"><br>
                <label>Текст сообщения</label><br>
                <textarea name="msg" title="Текст сообщения"></textarea>
            </form>
        </div>
</div>
</body>

Как я понимаю, проблема в том, что при нажатии на любой элемент формы, срабатывает также онклик на сам блок. Получается, что панель срабатывает по нажатию на основной блок.
Пытался перекинуть онКлик в дочерний блок, но (естественно) ничего не вышло, так как this передаёт тот элемент в котором стоит, а мне (как я понимаю) надо указать родительский элемент.
Порылся в поисковике по поводу указания родительского элемента, но ничего понятного найти не смог.
Помогите разобрать с проблемкой пожалуйста

@newJS · 12.11.2012, 08:03

это глянь

@rean1mator · 12.11.2012, 14:54 **[ТС]**

Решение нашел

Чисто случайно, в закромах Гугла, наткнулся на один сайт, напоминающий попытку автора своими руками сделать русскую документацию по JS.
На этом сайте нашел свойство parentElement.
Короче свой onClick="feedback (this)" перенес в дочерний div и дополнил найденным свойством. В итоге получилось onClick="feedback(this.parentElement)"

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	12.11.2012, 08:03
	это глянь 0

@rean1mator 84 / 84 / 1 Регистрация: 19.01.2011 Сообщений: 442
	12.11.2012, 14:54 [ТС]
	Решение нашел Чисто случайно, в закромах Гугла, наткнулся на один сайт, напоминающий попытку автора своими руками сделать русскую документацию по JS. На этом сайте нашел свойство parentElement. Короче свой onClick="feedback (this)" перенес в дочерний div и дополнил найденным свойством. В итоге получилось onClick="feedback(this.parentElement)" 0

Опции темы