Question

所以我有一个我正在构建的Web应用程序，我从服务器接收生成的html文章，并将其放在正文中。我的问题是：有没有办法为该消息中的标签设置默认的onclick行为？我宁愿避免解析每个标记的html和设置行为。我可能只是有一个大脑放屁，但觉得最好只是问。这背后的目标是使卡切换能够全屏显示图像。我只是想弄清楚如何设置点击行为。提前致谢。

Answer 1

大多数js库都有绑定服务功能......

在extJS中显然是

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

使用css选择器代替'img'，您可以使用某个类或某个ID，或者您喜欢的任何内容来制作图像。

Documentation

Answer 2

您可以通过多种方式执行此操作，但如果要添加的图像单击事件存储在中心元素中，则检索该元素（通过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变量

的原因

Answer 3

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

服务器返回html数据后，使用Component的更新方法。绑定到Component的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)});

    });

Answer 4

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

Answer 5

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

在生成的html中为<img/>标记设置默认的onclick行为

5 个答案: