Директива wire:click.self

Директива wire:click.self является модификатором директивы wire:click. Она вешается на HTML-элемент и вызывает указанный метод компонента, но только если клик произошёл именно по самому элементу, а не по его дочерним элементам. В значение передаётся имя публичного метода компонента.

Синтаксис

<div wire:click.self="methodName">
	<span>дочерний элемент</span>
</div>

Пример

Давайте создадим компонент с контейнером и вложенным элементом. При клике на контейнер будет увеличиваться счётчик, но при клике на вложенный span - нет:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Container extends Component
	{
		public $clicks = 0;
		
		public function increment()
		{
			$this->clicks++;
		}
		
		public function render()
		{
			return view('livewire.container');
		}
	}
?>

<div wire:click.self="increment" style="padding: 20px; border: 1px solid black;">
	<p>Кликов по контейнеру: {{ $clicks }}</p>
	<span style="background: yellow;">вложенный span</span>
</div>

Результат выполнения кода при клике на span:

<div style="padding: 20px; border: 1px solid black;">
	<p>Кликов по контейнеру: 0</p>
	<span style="background: yellow;">вложенный span</span>
</div>

При клике на контейнер (но не на span) счётчик увеличится:

<div style="padding: 20px; border: 1px solid black;">
	<p>Кликов по контейнеру: 1</p>
	<span style="background: yellow;">вложенный span</span>
</div>

Пример

Рассмотрим более сложный пример с несколькими вложенными элементами. Сделаем компонент с модальным окном, которое закрывается только при клике на фон, но не при клике на содержимое:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Modal extends Component
	{
		public $isOpen = true;
		
		public function close()
		{
			$this->isOpen = false;
		}
		
		public function render()
		{
			return view('livewire.modal');
		}
	}
?>

@if ($isOpen)
	<div wire:click.self="close" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;">
		<div style="background: white; padding: 30px; border-radius: 10px; min-width: 300px;">
			<h2>Модальное окно</h2>
			<p>Клик на фон закроет окно, а клик внутри - нет</p>
		</div>
	</div>
@endif

Результат выполнения кода при открытом модальном окне:

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;">
	<div style="background: white; padding: 30px; border-radius: 10px; min-width: 300px;">
		<h2>Модальное окно</h2>
		<p>Клик на фон закроет окно, а клик внутри - нет</p>
	</div>
</div>

При клике на серый фон модальное окно закроется, а при клике на белое содержимое - останется открытым.

Смотрите также

директиву wire:click,
которая вызывает метод при клике по элементу
директиву wire:click.prevent,
которая отменяет действие браузера по умолчанию
директиву wire:click.stop,
которая останавливает всплытие события клика
директиву wire:click.once,
которая вызывает метод только один раз