javascript 从常见html元素识别click事件

pb3skfrl 于 2023-09-29 发布在 Java

关注(0)|答案(2)|浏览(123)

我有一个引导卡，点击它，我将用户重定向到另一个页面。现在我在同一张卡片上添加一些描述，但有一些字符限制。一旦超过字符限制，我正在显示阅读更多.我想当用户点击阅读更多，它将打开一个模态，他们可以阅读完整的描述，也可以编辑它，如果他们想要的。我现在面临的问题是，即使点击“阅读更多”，它也认为这是点击卡片，将用户重定向到另一个页面，而不是打开模式。我该怎么处理这个案子。
我的HTML代码

<div id="someid" class="card tile-card estimate">
   <div class="card-header p-3 pt-2">
      <div class="icon icon-lg icon-shape bg-gradient-dark shadow-dark text-center border-radius-xl mt-n4 position-absolute">
         <i class="fa fa-icon fa-solid fa-dollar-sign opacity-10"></i>
      </div>
      <div class="text-end pt-1">
         <p class="text-sm mb-0 tile-title-p">Some Text</p>
         <p class="text-xs mb-0 tile-subtitle-p">Some More Text</p>
         <p class="text-xs mb-0 tile-subtitle-p" style="font-weight:bold;">@EFITStatus</p>
         <p class="text-xs mb-0 tile-subtitle-p fifty-chars" style="text-align: left;" title="Description">
            Some fixed character description
         </p>
         <div style="display:inline-flex">
            <span class="tile-number-title"></span>
            <h3 class="tile-number mb-0"></h3>
         </div>
         <div style="display:inline-flex">
            <span class="tile-number-title"></span>
            <h3 class="tile-number mb-0"></h3>
         </div>
      </div>
   </div>
   <div class="card-footer p-3">
      <p class="tile-subtitle-p tile-subtitle-footer mb-0">Footer</p>
   </div>
</div>

在第一个div元素上，我有一个name estimate类，我正在调用一个click事件。当试图调用.readmore类的click事件时，它仍然调用第一个click事件。
下面是两个独立的函数。
用于将用户重定向到另一页

$('.estimate').on('click', function (item) {
                    var eFITID = $(this).data('efitid');
                    window.location.href = "my path";
            });

下面的功能是字符限制和打开模式时，用户点击阅读更多的链接

$(function () {
            var maxL = 20;
            $('.fifty-chars').each(function () {
                var text = $(this).text().trim();
                if (text.length > maxL) {
                    var begin = text.substr(0, maxL),
                        end = text.substr(maxL);

                    $(this).html(begin)
                        .append($('<a class="readmore"/>').html('read more...'))
                }
            });
            $(document).on('click', '.readmore', function (e) {
                $(this).next('.hiddenText').slideToggle(400);
                $("#modalEditDescription").modal('show');
            });
        });

会怎么处理这个案子。如果你能帮忙的话，我将不胜感激。

JavaScript

来源：https://stackoverflow.com/questions/77178746/identify-click-event-from-common-html-element

2条答案

按热度按时间

3zwtqj6y1#

为了解决这个问题，正如@Freedomn所建议的，我删除了锚标签并更改了$（document）.on（'click'，'. readmore'，function... to $（'. readmore'）.on（'click'，function.下面是工作代码。

$(function() {
    var maxL = 20;
    $('.fifty-chars').each(function() {
        var text = $(this).text().trim();
        if (text.length > maxL) {
            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin).append('...')
                .append($('<i class="fa fa-edit readmore ml-2" style="color:#f84018"></i >'))

        } else {
            $(this).html(begin)
                .append($('<i class="fa fa-edit readmore ml-2" style="color:#f84018"></i >'))
        }
    });
    $('.readmore').on('click', function(e) {
        $("#modalEditDescription").modal('show');
        return false;
    });
});

赞(0）回复(0）举报 2023-09-29

idfiyjo82#

要处理点击“阅读更多”也会触发卡片点击事件并重定向用户的问题，您可以停止“阅读更多”链接上的点击事件的传播。这可以防止click事件冒泡到卡的click事件处理程序。您可以通过使用e.stopPropagation（）函数来实现这一点。
下面是修改后的代码：

$('.estimate').on('click', function (item) {
    var eFITID = $(this).data('efitid');
    window.location.href = "my path";
});

// Function for character limit and opening the modal when user clicks on read more link
$(function () {
    var maxL = 20;
    $('.fifty-chars').each(function () {
        var text = $(this).text().trim();
        if (text.length > maxL) {
            var begin = text.substr(0, maxL),
                end = text.substr(maxL);

            $(this).html(begin)
                .append($('<a class="readmore"/>').html('read more...'))
                .append($('<div class="hiddenText"/>').text(end).hide()); // Add hidden text
        }
    });

    // Click event handler for "read more" link
    $(document).on('click', '.readmore', function (e) {
        e.stopPropagation(); // Stop the click event from propagating to the card
        $(this).next('.hiddenText').slideToggle(400);
        $("#modalEditDescription").modal('show');
    });
});

赞(0）回复(0）举报 2023-09-29

我来回答

javascript 从常见html元素识别click事件

2条答案

相关问题

热门标签

最新问答