Angular+Tailwind环境下Input旁SVG图标点击无效问题

问题根源很明确：你右侧图标所在的外层容器添加了pointer-events-none类，这个Tailwind类会让容器内所有元素都无法接收任何鼠标事件，哪怕你给图标或包裹它的div加了cursor-pointer和(click)绑定也会被完全覆盖。

修复方案 #

有两种可行的修复方式，根据你的需求选择：

方式一：直接移除外层容器的pointer-events-none类

如果右侧容器内没有需要保持“不可点击”状态的元素，直接删掉该类即可：

<div class="mx-2 my-2 align-bottom">
    <label for="search"
        class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
    <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none text-secondary">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-7.81 7.81a1.5 1.5 0 002.112 2.13" />
            </svg>
        </div>
        <input type="text" [ngModel]="msgText"
            class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-inpt-bgcolor"
            placeholder="Your Message">
        <!-- 移除了pointer-events-none类 -->
        <div class="absolute inset-y-0 right-2.5 flex items-center pr-3 text-secondary">
            <div (click)="addMessage()" class="cursor-pointer">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6 ml-2 cursor-pointer">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                </svg>
            </div>
        </div>
    </div>
</div>

方式二：保留外层pointer-events-none，单独启用图标点击

如果右侧容器内还有其他需要保持“不可点击”的元素，只需给图标所在的div添加pointer-events-auto类，覆盖父级的禁用设置：

<div class="absolute inset-y-0 right-2.5 flex items-center pr-3 pointer-events-none text-secondary">
    <!-- 添加pointer-events-auto，让这个div能接收点击事件 -->
    <div (click)="addMessage()" class="cursor-pointer pointer-events-auto">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
            stroke="currentColor" class="w-6 h-6 ml-2 cursor-pointer">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
        </svg>
    </div>
</div>

内容的提问来源于stack exchange，提问作者rameez khan