在生成的 html 中为 <img> 标签设置默认的点击行为

Posted 2023-02-26

【中文标题】在生成的 html 中为 <img> 标签设置默认的点击行为

【英文标题】：Setting default onclick behavior for <img> tag in generated html

【发布时间】：2012-09-12 17:50:47

【问题描述】：

所以我有一个我一直在构建的网络应用程序，我从服务器接收生成的 html 用于发布，并将其放置在正文中。我的问题是：有没有办法为该消息中的标签设置默认的点击行为？我宁愿避免解析 html 并为每个标签设置行为。我可能只是在放屁，但最好只是问一下。这背后的目标是启用卡片开关以全屏显示图像。我只是不知道如何设置点击行为。提前致谢。

【参考方案1】：

大部分js库都有绑定服务功能...

显然在 extJS 中

Ext.select('img').on('click', function);

使用 css 选择器代替“img”，您可以制作具有特定类别、特定 ID 或任何您喜欢的图像。

Documentation

【讨论】：

这个。此外，如果您的容器有一个 ID，Ext.create('Ext.Panel', id: 'SomePanel'); 您可以使用 Ext.select('#SomePanel img') 定位图像 - Ext.select() 为您提供一组匹配的元素 - .on() 到整个组 应该 i> 工作，但如果没有，你也可以Ext.select('blah').each(...) 元素。 编辑：哦，您也可以这样做（假设 MyPanel 是您的组件）：MyPanel.getEl().select() 也用于特定目标。

【参考方案2】：

您可以使用 Ext JS 组件来执行此操作。任何数量的 Ext 组件都可以以这种方式工作，但只需要基本组件即可。

一旦服务器返回 html 数据，使用组件的更新方法。绑定到组件的 html 元素的 click 事件，然后在组件内单击的任何 html 元素都会触发 click 事件。在绑定到事件的函数中，事件对象将可用，并会告诉您点击了什么。

    Ext.onReady(function() 
        var htmlContainer,
            htmlFromServer;

        /*
         * you can create a component that will be 
         * be used to set the html into the page
         * while allowing it to be managed from Ext JS
         */
        htmlContainer = Ext.create('Ext.Component', 
            renderTo: Ext.getBody(),
            width: 400,
            height: 400
        );

        /*
         * this would be html from your service call
         * this is just a simplified example
         */
        htmlFromServer = '<div>Click this Div and this will be the event target. Click the image and that will be the value of the event target.</div><img src="http://www.sencha.com/img/apple-touch-icon.png" /><span>And this is some span-wrapped content.</span>';

        /* update the component with the html you want it to contain */
        htmlContainer.update(htmlFromServer);

        /* bind to the click event of the components html element */
        htmlContainer.getEl().on('click', function (event)  console.log('event object and html element that was clicked:', event, event.target));

    );​

【参考方案3】：

您可以通过多种方式执行此操作，但如果您要添加点击事件的图像存储在中心元素中，请检索该元素（通过 document.getElementByTagName、byId、byClassName 等），那么您可以这样做以下：

// Create a few variables to help us out
var index = 0,
    imgs = centerEle.getElementsByTagName("img"),
    eventType = "addEventListener", // Default event listener function
    eventPrefix = ""; // default prefix for event names

// IE event model support:
if (!document.hasOwnProperty("addEventListener")) 
    eventType = "attachEvent";
    eventPrefix = "on";


// Loop through images in the central element
for (var a = 0; a < imgs.length; a += 1) 
    /* if you wanted to exclude certain iamges:
    if (img[a].src !== "http://somesite.com/img.jpg" && 
        img[a].src !== "http://somesite.com/img2.jpg")  */

    img[a][eventType](eventPrefix + "click",function(evnt) 
        // 'this' is the img
        // evnt is the event that was raised
        // everything within this function will be called when the image is clicked
    );
    // 

几点说明：

我没有采取简单的方法，而是使用事件侦听器而不是onclick，这是因为如果元素已经指定了onclick 事件，那么以后指定的onclick 属性将覆盖前一个。

除了使用事件侦听器而不是事件属性外，我还加入了 IE 支持。这就是我包含eventType 和eventPrefix 变量的原因

【参考方案4】：

您可以使用document.getElementsByTagName("IMG") 或使用jquery 选择器获取页面中的所有IMG，并将您的默认点击处理程序与每个IMG 元素上的onclick 事件相关联。 （有关如何使用 jquery 执行此操作的确切语法，您可以参考手册）。

【参考方案5】：

我相信这就是 jQuery 的 .live() (< jq 1.7) 和 .on() (>= jq 1.7) 方法的用途。您可以使用它来将事件绑定到绑定时不存在的元素。