1

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

4

5 回答 5

3

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

在 extJS 中显然是

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

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

文档

于 2012-09-12T17:59:35.750 回答
1

您可以通过多种方式执行此操作，但如果您要添加点击事件的图像存储在中心元素中，检索该元素（通过 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 支持。这就是我包含eventTypeandeventPrefix变量的原因

于 2012-09-12T18:19:43.597 回答
1

您可以使用 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)});

    });​
于 2012-09-12T23:54:15.100 回答
0

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

于 2012-09-12T17:56:43.463 回答
0

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

于 2012-09-12T18:55:06.597 回答