css HTML“详细信息”元素-不在特定区域(例如，操作按钮)触发“切换”事件

dy2hfwbg 于 2023-03-14 发布在其他

关注(0)|答案(1)|浏览(116)

我目前正在为一个人的祖先做一个简单的树视图。显示数据工作得很好。折叠也是由HTML元素本身处理的。每个树项目有3个操作按钮。
当单击这些按钮时，我不希望触发details元素的toggle事件。如何限制toggle事件仅在单击3个按钮之外的按钮时发生，或者仅单击每个树项目上的黑色箭头？

<details *ngIf="tree" class="form-control mb-2 mt-2" open style="width: 100%; margin-left: 12.5px">
  <summary>
    {{tree?.name}} <i class="bi" [ngClass]="'bi-gender-' + tree?.sex.toLowerCase()"></i>
    <div class="btn-group float-end">
      <span class="mt-1">{{tree?.dateOfBirth}}</span>
      <a [routerLink]="['/horses/detail', tree?.id]"
         class="btn btn-sm">
        <i class="bi bi-info-lg"></i>
      </a>
      <a [routerLink]="['/horses/edit', tree?.id]"
         class="btn btn-sm">
        <i class="bi bi-pencil"></i>
      </a>
      <a (click)="deleteHorse()"
         class="btn btn-sm">
        <i class="bi bi-trash"></i>
      </a>
    </div>
  </summary>
  <app-node [tree]="tree?.father"></app-node>
  <app-node [tree]="tree?.mother"></app-node>
</details>

我在details标记上找不到任何有关自定义切换和单击事件的信息。

css

来源：https://stackoverflow.com/questions/75691021/html-details-element-dont-fire-toggle-event-in-a-specific-area-e-g-acti

1条答案

按热度按时间

erhoui1w1#

我不使用 bootstrap，但你的问题可能是由按钮作为常规子元素（'flow'的一部分）冒泡指针事件到其父元素summary引起的。没有你的CSS和运行的minimal reproducible example，我不可能发现这是真的。
相反，我创建了一个符合您要求的普通代码替代方案，简单地说，我将summary元素作为relative的父元素，并将absolute定位DOB和按钮。
CSS分为两个部分：“行为”和“布局”。

行为

使summary元素成为relative父元素。
在summary中创建了一个.content元素，用于保存出生日期（.dob）和按钮组（.btn-group）。
.content元素被定位在summary内的absolute。
为details创建了一个“stopper”类（.nop），以便在没有更深级别的details时禁用summarypointer-events。
布局

“layout”CSS实际上只是在代码片段中模拟布局的演示代码。

片段

/*************/
/* Behaviour */
/*************/
summary                { position: relative; width: 100% }
summary .content       { position: absolute; top: 0; right: 0 }

/* Disable pointer events for (great-) grandpa, grandma */
.nop > summary         { pointer-events: none }
.nop > summary::marker { color: transparent } /* hide marker */
.nop                   { padding-left: 0 } /* mimic marker gone */

/* Reinstate pointer events for buttons */
.btn-group             { pointer-events: auto }

/* Cursor layout */
.nop > summary, summary .dob { cursor: default } /* only 'body' would work too */
summary, .btn-group > *      { cursor: pointer }

/***************************/
/* Layout, eye-candy, etc. */
/***************************/
body { font-size: 0.875rem; font-family: Poppins, sans-serif; } /* 14px */

/* prevent/enable text selection, also convenient for inadverted user multi-clicks */
[no-select],[noselect] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
[select]               { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }

details {
    padding: 0.125rem 0 0.0625rem 1rem; margin: 0.5rem 0;
    border: 1px solid hsl(0,0%,0%,0.2)
}
details > details { border-right: none }
details[open]     { padding-bottom: 0 }

.C   { padding: 0.5rem 0 0.5rem 0.5rem } /* Child */ 
.P   { /* parent */ } 
.GP  { /* grand parent */ } 
.GGP { /* great grand parent */ } 

/* Google material symbols outlined, gender and buttons */
[gender], [btn] {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 48;

    font-family: 'Material Symbols Outlined';
    font-size  : 1.2em; line-height: 1.1;
    font-style : normal;

    vertical-align: text-bottom;
}

[gender="f" i]::after { content: 'female' }
[gender="m" i]::after { content: 'male'   }

[btn]                 { color: inherit; text-decoration: none; padding: 0 0.125rem }
[btn="d" i]::after    { content: 'delete' }
[btn="e" i]::after    { content: 'edit' }
[btn="i" i]::after    { content: 'info' }

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

<details class="C" noselect>
    <summary>Child <i gender="m"></i>
        <div class="content">
            <span class="dob">2023-03-10</span>
            <span class="btn-group">
                <a btn="i" href="javascript:void(0)"></a>
                <a btn="e" href="javascript:void(0)"></a>
                <a btn="d" href="javascript:void(0)"></a>
            </span>
        </div>
    </summary>

    <details class="P">
        <summary>Father <i gender="m"></i>
            <div class="content">
                <span class="dob">2023-03-10</span>
                <span class="btn-group">
                    <a btn="i" href="javascript:void(0)"></a>
                    <a btn="e" href="javascript:void(0)"></a>
                    <a btn="d" href="javascript:void(0)"></a>
                </span>
            </div>
        </summary>

        <details class="GP nop">
            <summary>Grandpa <i gender="m"></i>
                <div class="content">
                    <span class="dob">2023-03-10</span>
                    <span class="btn-group">
                        <a btn="i" href="javascript:void(0)"></a>
                        <a btn="e" href="javascript:void(0)"></a>
                        <a btn="d" href="javascript:void(0)"></a>
                    </span>
                </div>
            </summary>
        </details>
        <details class="GP nop">
            <summary>Grandma <i gender="f"></i>
                <div class="content">
                    <span class="dob">2023-03-10</span>
                    <span class="btn-group">
                        <a btn="i" href="javascript:void(0)"></a>
                        <a btn="e" href="javascript:void(0)"></a>
                        <a btn="d" href="javascript:void(0)"></a>
                    </span>
                </div>
            </summary>
        </details>
    </details>

    <details class="P">
        <summary>Mother <i gender="f"></i>
            <div class="content">
                <span class="dob">2023-03-10</span>
                <span class="btn-group">
                    <a btn="i" href="javascript:void(0)"></a>
                    <a btn="e" href="javascript:void(0)"></a>
                    <a btn="d" href="javascript:void(0)"></a>
                </span>
            </div>
        </summary>

        <details class="GP">
            <summary>Grandpa <i gender="m"></i>
                <div class="content">
                    <span class="dob">2023-03-10</span>
                    <span class="btn-group">
                        <a btn="i" href="javascript:void(0)"></a>
                        <a btn="e" href="javascript:void(0)"></a>
                        <a btn="d" href="javascript:void(0)"></a>
                    </span>
                </div>
            </summary>
            <details class="GGP nop">
                <summary>G-grandpa <i gender="m"></i>
                    <div class="content">
                        <span class="dob">2023-03-10</span>
                        <span class="btn-group">
                            <a btn="i" href="javascript:void(0)"></a>
                            <a btn="e" href="javascript:void(0)"></a>
                            <a btn="d" href="javascript:void(0)"></a>
                        </span>
                    </div>
                </summary>
            </details>
        </details>

        <details class="GP">
            <summary>Grandma <i gender="f"></i>
                <div class="content">
                    <span class="dob">2023-03-10</span>
                    <span class="btn-group">
                        <a btn="i" href="javascript:void(0)"></a>
                        <a btn="e" href="javascript:void(0)"></a>
                        <a btn="d" href="javascript:void(0)"></a>
                    </span>
                </div>
            </summary>

            <details class="GGP nop">
                <summary>G-grandpa <i gender="m"></i>
                    <div class="content">
                        <span class="dob">2023-03-10</span>
                        <span class="btn-group">
                            <a btn="i" href="javascript:void(0)"></a>
                            <a btn="e" href="javascript:void(0)"></a>
                            <a btn="d" href="javascript:void(0)"></a>
                        </span>
                    </div>
                </summary>
            </details>
            <details class="GGP nop">
                <summary>G-grandma <i gender="f"></i>
                    <div class="content">
                        <span class="dob">2023-03-10</span>
                        <span class="btn-group">
                            <a btn="i" href="javascript:void(0)"></a>
                            <a btn="e" href="javascript:void(0)"></a>
                            <a btn="d" href="javascript:void(0)"></a>
                        </span>
                    </div>
                </summary>
            </details>
        </details>
    </details>
</details>

赞(0）回复(0）举报 2023-03-14

我来回答

css HTML“详细信息”元素-不在特定区域(例如，操作按钮)触发“切换”事件

1条答案

相关问题

热门标签

最新问答