#javascript #html #css #reactjs
Вопрос:
У меня есть моя React.js приложение запущено и работает, все работает так, как должно. По предложению/запросу меня попросили добавить своего рода скрытую кнопку/область, которую я могу нажать для выполнения определенной задачи. Это не должна быть видимая кнопка, предложение состояло в том, чтобы сделать текущие часы кликабельными (или определенную их часть).
Сначала я подумал, что могу просто сделать div, сделать его нужного размера и добавить onClick в тег div. Это работает, но работает не так хорошо, как мне бы хотелось. Кажется, что область кликабельности выходит за пределы тега div, что для меня действительно странно.
Я добавил простую границу к тегу div, чтобы убедиться, что он не больше, чем я ожидаю, но это не так. Тем не менее, кликабельная часть слишком велика.
<div className="test" onClick={...}>Clock</div>
Вот как я сделал свой div. Как я уже сказал, это работает, но не совсем так, как я хотел. Поэтому мой вопрос состоит из двух частей: либо если кто — нибудь знает, почему кажется, что моя область кликабельности больше, чем должна быть (я определил ширину и высоту в css, и я могу четко видеть область благодаря границе), либо если кто-нибудь сделал/знает какое-то аналогичное решение проблемы. Могу ли я определить определенную область на странице и сделать ее доступной для кликабельности? Я не хочу, чтобы это было видно, поэтому оно должно быть прозрачным и не мешать остальной части приложения.
Благодарен за все предложения, которые я могу получить.
Комментарии:
1. В чем смысл кликабельного элемента, который вы не видите?
2. добавьте ширину или высоту к элементу большего размера
3. @Энди, это не должно быть для тех, кто не знает, где это находится. Это не конец света, если обычный пользователь нажимает на нее, но это функция для людей, которые знают, что она скрыта, например, в часах. Может показаться глупым, но у этого есть своя цель.
4. @windmaomao Я уже добавил ширину и высоту в div и подтвердил его размер, добавив границу. Тем не менее, по какой-то странной причине, он доступен вне div.
5. @Kriistoffer, если вы используете React , он не позволит вам щелкнуть снаружи, если вы не прослушаете событие окна. Дважды проверьте div, и
box-sizing: border-box;иногда это имеет значение.
Ответ №1:
Я думаю, что дело здесь может быть в бурлении событий. Если вы не знакомы с пузырьковым событием, это означает, что у вас может быть «элемент» поверх «другого элемента», и ваш «элемент», например, щелкнут (или с ним произошло какое-то другое событие), по умолчанию он передаст событие своему родителю, поэтому ваш «другой элемент» будет похож на щелчок. Чтобы убедиться, так это или нет, вы можете посмотреть, есть ли «какой-либо элемент» поверх вашего div элемента с именем класса test и прикреплен ли к нему какой-либо обработчик щелчка. Если это так, вы можете просто прикрепить e.stopPropagation вызов метода к этому обработчику щелчка «любой элемент».
Комментарии:
1. Это определенно кажется наиболее вероятным ответом, я немного почитал об этом, но это не совсем решило мою ситуацию. Похоже, он немного улучшился, изменив некоторый код, но родительский div по-прежнему доступен для кликабельности. Мне нужно кое-что проверить. Спасибо вам за предложение и помощь, очень ценю это!