Чтобы при клике на элементы <p> внутри <div> был активирован только обработчик событий для самого <div>, а не для <p>, можно использовать механизм всплытия событий в JavaScript.
По умолчанию, события в JavaScript всплывают от вложенных элементов к родительским элементам, таким образом, при клике на <p> будет сначала вызван обработчик для <p>, а затем - для <div>.
Чтобы предотвратить всплытие события от <p> к <div>, можно воспользоваться методом stopPropagation() объекта события, который останавливает всплытие события.
Вот пример кода, который демонстрирует данное поведение:
<!DOCTYPE html>
<html>
<head>
<title>Only div click event</title>
</head>
<body>
<div id="testDiv" onclick="handleDivClick()">
<p onclick="handleParagraphClick()">Click me</p>
</div>
<script type="text/javascript">
function handleDivClick() {
console.log('Div clicked');
}
function handleParagraphClick(event) {
event.stopPropagation();
console.log('Paragraph clicked');
}
</script>
</body>
</html>
В этом примере, при клике на <p> будет вызываться только обработчик для <p>, а обработчик для <div> не будет вызван благодаря использованию stopPropagation().