带有 clipPath 的 div 的单击事件在 angular.js 中不起作用

Posted 2023-03-06

【中文标题】带有 clipPath 的 div 的单击事件在 angular.js 中不起作用

【英文标题】：click event for a div with clipPath doesn't work in angular.js

【发布时间】：2020-04-22 21:37:21

【问题描述】：

我这里有一些问题。我有一个边界上有一个 SVG 的 div。我想向 div 添加一个点击事件，但 SVG 不允许点击事件在 div 上工作。 这是组件的模板：

<div class="input-container dash-bordered clipped-left-borders">
    <div class="input-filed no-icon-field">
        <span class="icon-plane-left-down input-icon-font"></span>
        <input type="text" class="input" placeholder="something" (click)="toggleDestinationDropDown(true)" />
    </div>
</div>

<svg id="clipSvg" viewBox="0 0 500 0">
    <defs>
        <clipPath id="clipLeft" clipPathUnits="objectBoundingBox" transform="scale(0.002 0.01)">
            <path d="M-20 0 A3 2, 0, 0 0, 20 0 L20 100 A3 2, 0, 0 0, -20 100 L0 20" fill="royalblue" stroke="black" />
            <rect x="20" y="0"   />
        </clipPath>

        <clipPath id="clipRight" clipPathUnits="objectBoundingBox" transform="scale(0.002 0.01)">
            <path d="M520 0 A3 2, 0, 0 1, 480 0 L480 100 A3 2, 0, 0 1, 520 100 L500 20" fill="royalblue"
                stroke="black" />
            <rect x="0" y="0"   />
        </clipPath>
    </defs>
</svg>

这是css：

.clipped-left-borders 
  clip-path: url(#clipLeft);



#clipSvg 
  width: 0px;
  height: 0px;
  pointer-events: none;

我该如何解决这个问题？？？

【问题讨论】：

您使用的是哪个角度版本？你用的是 angularjs 还是 angular +2？

CSS 在哪里，因为它需要与 clipLeft 元素在同一个文件中。

CSS 在 search.component.scss 文件中，html 在 search.component.html 文件中。

【参考方案1】：

angularjs 使用 ng-click 指令而不是 (click) ，后者是 angular +2 版本的语法。

所以在您的 HTML 中将 (click)="toggleDestinationDropDown(true)" 替换为 ng-click="toggleDestinationDropDown(true)"