需要在點擊時添加事件監聽器

Question

我制作了這個技術上屬於電子目錄的觀察器。

我現在要做的是跟蹤對圖標的點擊。 所以我現在真正需要做的就是能夠通過點擊圖標來執行功能。

但是我無法弄清楚代碼中的位置。

請幫我確定哪一個是正確的？ 一個簡單的警報（“工作”）; 點擊將是美好的！

我最初的猜測是：

        // Add an event listener for ThumbnailPageButton click events
        thumbnailPageButton.addEventListener("click", onThumbnailPageButton, false);

和：

/* Event handler for s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT events dispatched by PageView to switch pages 
           for PageView item selections. */

    function onPageViewSelected(event){
        switchToPage(event);
    }

但這似乎不起作用。

它的一個例子是 ：

 <style type="text/css" media="screen"> /* alert('Should be receiving the URL');var s = '$$'; $.colorbox({"href": s}); $.colorbox.resize();*/ /*************************************************************************/ /* The following styles overwrites the default styles defined by s7sdk to provide custom look and feel. */ /*************************************************************************/ /* Document body */ body { padding: 0; margin: 0; overflow: hidden; } /*************************************************************************/ /* Container */ /* This example specifies default size of the entire eCatalog viewer */ .s7container { width: 760px; height: 334px; background-color: rgb(221, 221, 221); } /*************************************************************************/ /* Tooltip */ .s7tooltip { display: none !important; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; border-color: #999999; background-color: #000000; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; font-size: 11px; } /*************************************************************************/ /* PageView */ .s7pageview { position: absolute; top: 0px; left: 0px; } /* Icon effect */ .s7pageview .s7iconeffect { display: none !important; width: 100px; height: 100px; background-size: contain; } .s7pageview .s7iconeffect[media-type='standard'] { display: none !important; background-image: url(images/IconEffect_zoom.png); } .s7pageview .s7iconeffect[media-type='multitouch'] { background-image: url(images/IconEffect_pinch.png); } /*************************************************************************/ /* ThumbnailGridView that displays thumbnails for all pages. */ .s7thumbnailgridview { width: 1024px; height: 768px; top: 40px; left: 0px; position: absolute; } .s7thumbnailgridview .s7thumb { width: 120px; height: 85px; background-color: rgb(255, 255, 255); border: solid 1px #999999; } .s7thumbnailgridview .s7thumb[state="selected"] { border: solid 2px #666666; } .s7thumbnailgridview .s7thumbcell { margin-left: 5px; margin-bottom: 5px; margin-right: 5px; margin-top: 5px; } .s7thumbnailgridview .s7scrollbar { background-color: rgba(102, 102, 102, 0); position: absolute; top: 8px; bottom: 8px; right: 8px; width: 28px; } .s7thumbnailgridview .s7scrollbar .s7scrolltrack { width: 28px; background-color: rgba(102, 102, 102, 0.5); } .s7thumbnailgridview .s7scrollbar .s7scrollthumb { display: none !important; visibility: hidden !important; width: 28px; height: 45px; } .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='up'] { background-image: url(images/ThumbnailScrollThumb_dark_up.png); } .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='over'] { background-image: url(images/ThumbnailScrollThumb_dark_over.png); } .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='down'] { background-image: url(images/ThumbnailScrollThumb_dark_down.png); } .s7thumbnailgridview .s7scrollbar .s7scrollthumb[state='disabled'] { background-image: url(images/ThumbnailScrollThumb_dark_up.png); } .s7thumbnailgridview .s7scrollbar .s7scrollupbutton { width: 28px; height: 32px; } .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='up'] { background-image: url(images/ThumbnailScrollUpButton_dark_up.png); } .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='over'] { background-image: url(images/ThumbnailScrollUpButton_dark_over.png); } .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='down'] { background-image: url(images/ThumbnailScrollUpButton_dark_down.png); } .s7thumbnailgridview .s7scrollbar .s7scrollupbutton[state='disabled'] { background-image: url(images/ThumbnailScrollUpButton_dark_up.png); } .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton { width: 28px; height: 32px; } .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='up'] { background-image: url(images/ThumbnailScrollDownButton_dark_up.png); } .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='over'] { background-image: url(images/ThumbnailScrollDownButton_dark_over.png); } .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='down'] { background-image: url(images/ThumbnailScrollDownButton_dark_down.png); } .s7thumbnailgridview .s7scrollbar .s7scrolldownbutton[state='disabled'] { background-image: url(images/ThumbnailScrollDownButton_dark_up.png); } /*************************************************************************/ /* ControlBar containing both ThumbnailPageButton and FullScreenButton */ /* MVS - hide tool bar at top */ .s7controlbar { display: none !important; visibility: hidden !important; position: absolute; left: 0; top: 0px; width: 100%; height: 36px; position: absolute; display: block; z-index: 1; background-color: rgb(0, 0, 0); /*whithout alpha*/ background-color: rgba(0, 0, 0, 0.5); z-index: 2; } /*************************************************************************/ /* ImageMapEffect */ .s7imagemapeffect .s7mapoverlay { height: 17px; width: 17px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; background-image: url(images/circle-white-bold.png); } .s7imagemapeffect .s7mapoverlay[state="default"] { opacity: 1; } .s7imagemapeffect .s7mapoverlay[state="active"] { opacity: 1; } /*************************************************************************/ /* FullScreenButton */ .s7fullscreenbutton { position: absolute; bottom: 4px; right: 5px; width: 28px; height: 28px; background-size: contain; } .s7fullscreenbutton[selected='true'][state='up'] { background-image: url(images/MinScreenButton_dark_up.png); } .s7fullscreenbutton[selected='true'][state='over'] { background-image: url(images/MinScreenButton_dark_over.png); } .s7fullscreenbutton[selected='true'][state='down'] { background-image: url(images/MinScreenButton_dark_down.png); } .s7fullscreenbutton[selected='true'][state='disabled'] { background-image: url(images/MinScreenButton_dark_disabled.png); } .s7fullscreenbutton[selected='false'][state='up'] { background-image: url(images/FullScreenButton_dark_up.png); } .s7fullscreenbutton[selected='false'][state='over'] { background-image: url(images/FullScreenButton_dark_over.png); } .s7fullscreenbutton[selected='false'][state='down'] { background-image: url(images/FullScreenButton_dark_down.png); } .s7fullscreenbutton[selected='false'][state='disabled'] { background-image: url(images/FullScreenButton_dark_disabled.png); } /*************************************************************************/ /* ThumbnailPageButton */ .s7thumbnailpagebutton { position: absolute; bottom: 4px; left: 5px; width: 20px; height: 20px; background-size: contain; } .s7thumbnailpagebutton[selected='false'][state='up'] { background-image: url(images/ThumbnailPageButton_dark_up.png); } .s7thumbnailpagebutton[selected='false'][state='over'] { background-image: url(images/ThumbnailPageButton_dark_over.png); } .s7thumbnailpagebutton[selected='false'][state='down'] { background-image: url(images/ThumbnailPageButton_dark_down.png); } .s7thumbnailpagebutton[selected='false'][state='disabled'] { background-image: url(images/ThumbnailPageButton_dark_disabled.png); } .s7thumbnailpagebutton[selected='true'][state='up'] { background-image: url(images/ThumbnailPageButton_dark_over.png); } .s7thumbnailpagebutton[selected='true'][state='over'] { background-image: url(images/ThumbnailPageButton_dark_over.png); } .s7thumbnailpagebutton[selected='true'][state='down'] { background-image: url(images/ThumbnailPageButton_dark_over.png); } .s7thumbnailpagebutton[selected='true'][state='disabled'] { background-image: url(images/ThumbnailPageButton_dark_disabled.png); } /*************************************************************************/ /* InfoPanelPopup */ .s7infopanelpopup { position: absolute; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.75); z-index: 6000; } .s7infopanelpopup .s7overlay { left: 50%; top: 50%; width: 300px; height: 200px; margin-left: -150px; margin-top: -100px; padding-top: 40px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; background-color: rgb(221, 221, 221); -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; background-size: 100% 100%; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); box-shadow: 0 0 5px rgba(0, 0, 0, 0.25); } .s7infopanelpopup .s7closebutton { position: absolute; width: 28px; height: 28px; top: 5px; right: 5px; padding: 0px; visibility: inherit; } .s7infopanelpopup .s7closebutton[state="up"] { background-image: url(images/InfoPanelPopup_CloseButton_dark_up.png); } .s7infopanelpopup .s7closebutton[state="over"] { background-image: url(images/InfoPanelPopup_CloseButton_dark_over.png); } .s7infopanelpopup .s7closebutton[state="down"] { background-image: url(images/InfoPanelPopup_CloseButton_dark_up.png); } .s7infopanelpopup .s7closebutton[state="disabled"] { background-image: url(images/InfoPanelPopup_CloseButton_dark_up.png); } /*************************************************************************/ /* PageScrubber */ .s7pagescrubber { height: 0px !important; width: 1024px; bottom: 20px; left: 0px; position: absolute; z-index: 3; } /* Track component of the PageScrubber */ .s7pagescrubber .s7track { display: none !important; visibility: hidden !important; width: 760px; padding-top: 200px; } </style> </head> 

 <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- removed height=device-height, --> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <title>Adobe Scene7 Viewer SDK eCatalog Example</title> <script language="javascript" type="text/javascript" src="http://s7d1.scene7.com/s7sdk/2.9/js/s7sdk/utils/Utils.js"></script> <script language="javascript" type="text/javascript"> s7sdk.Util.lib.include('s7sdk.common.Button'); s7sdk.Util.lib.include('s7sdk.common.ControlBar'); s7sdk.Util.lib.include('s7sdk.common.Container'); s7sdk.Util.lib.include('s7sdk.set.PageView'); s7sdk.Util.lib.include('s7sdk.set.PageScrubber'); s7sdk.Util.lib.include('s7sdk.set.ThumbnailGridView'); s7sdk.Util.lib.include('s7sdk.image.ImageMapEffect'); s7sdk.Util.lib.include('s7sdk.info.InfoPanelPopup'); s7sdk.Util.lib.include('s7sdk.set.MediaSet'); </script> <script src="https://www.ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="../jquery.colorbox.js"></script> <body> <script type="text/javascript"> function myFunction(receiveHrefFromS7) { // store the received parameter from S7 var quickViewLink = receiveHrefFromS7; //or else it will execute within the iFrame. $(function() { parent.test(quickViewLink); }); } </script> <script language="JavaScript" type="text/javascript"> // Call the s7sdk.Util.init() method to initialize the s7sdk libraries. s7sdk.Util.init(); /* Create an instance of the ParameterManager component to collect components' configuration that can come from a viewer preset, URL, or the HTML page itself. The ParameterManager component also sends a notification s7sdk.Event.SDK_READY when all needed files are loaded and the configuration parameters are processed. The other components should never be initialized outside of this handler. After defining the handler for the s7sdk.Event.SDK_READY event, it is safe to initiate configuration initialization by calling ParameterManager.init(). */ var params = new s7sdk.ParameterManager(); /* Variables for component objects */ var container, pageView, pageScrubber, controls, mediaSet, imageMapEffect, infoPanelPopup, thumbnailPageButton, gridView, fullScreenButton; /* Event handler for s7sdk.Event.SDK_READY dispatched by ParameterManager to initialize various components of this viewer. */ function initViewer() { /* Explicitly specify default modifiers in the viewer code by calling push(). Specify the default video by pushing serverurl, videoserverurl and asset. 'serverurl' should refer to the image server where your company assets reside. 'asset' should be assigned with an asset ID. Both 'serverurl' and 'asset' can be omitted or overriden if they were pass as URL parameters (serverurl=...) and (asset=...) */ params.push("serverurl", "http://s7d5.scene7.com/is/image/"); // Create MediaSet to manage assets and add event listener to the NOTF_SET_PARSED event mediaSet = new s7sdk.set.MediaSet(null, params, "s7mediaSet"); // Add MediaSet event listener mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false); /* Disable Info Panel by default, append ImageMapEffect.rollover=1 to enable. When enabled, the Info Panel will display the template string when the mouse is over a map region. */ params.push("ImageMapEffect.rollover", "0"); /* Define template and variable mappings for content of Info Panel. In this example, the template string is defined for all the hotspot is: Value of <b>var1</b> for the map region is <b>$var1$</b>, where $var1$ will be substituted by the value defined in the <var /> element of that region, or assume the global default definition. In this example, the global default value for var1 is defined as "Adobe Scene7", the default value for var1 for map region 1-1 is not defined and will assume the global default value, the default value for var1 for map region 2-1 is defined as "Dynamic Imaging Solution", the default value for var1 for map region 2-2 is defined as "eCatalog Solution", the default value for var1 for map region 3-1 is defined as "Visual Configurators Solution", and the default value for var1 for map retion 3-2 is defined as "Targeted Email & Print Solution" */ params.push('template', '<info><var name="var1"><![CDATA[Adobe Scene7]]></var><var name="var1" rollover="2-1"><![CDATA[Dynamic Imaging Solution]]></var><var name="var1" rollover="2-2"><![CDATA[eCatalog Solution]]></var><var name="var1" rollover="3-1"><![CDATA[Visual Configurators Solution]]></var><var name="var1" rollover="3-2"><![CDATA[Targeted Email & Print Solution]]></var><![CDATA[Value of <b>var1</b> for this map region is <b>$var1$</b>]]></info>'); //Template for Info Panel popup /* Create a viewer container as a parent component for other UI components that are part of the viewer application and associate event handlers for resize and fullscreen notification. The advantage of using Container as the parent is the component's ability to resize and bring itself and its children to full screen. */ container = new s7sdk.common.Container(null, params, "s7container"); container.addEventListener(s7sdk.event.ResizeEvent.COMPONENT_RESIZE, resizeViewer, false); container.addEventListener(s7sdk.event.ResizeEvent.FULLSCREEN_RESIZE, onContainerFullScreen, false); // Create the PageScrubber component object pageScrubber = new s7sdk.set.PageScrubber(container, params, "s7pageScrubber"); // Create the PageView component object pageView = new s7sdk.set.PageView(container, params, "s7pageView"); // Create the ThumbnailGridView component object gridView = new s7sdk.set.ThumbnailGridView(container, params, "s7gridView"); // Create the ControlBar component object controls = new s7sdk.common.ControlBar(container, params, "s7controls"); // Create the ImageMapEffect component object imageMapEffect = new s7sdk.image.ImageMapEffect("s7pageView", params, "s7imageMapEffect"); // Add event listeners for image map rollover and target events imageMapEffect.addEventListener(s7sdk.event.RolloverKeyEvent.ROLLOVER_ACTIVATED, rolloverKeyHandler, false); imageMapEffect.addEventListener(s7sdk.event.RolloverKeyEvent.ROLLOVER_DEACTIVATED, rolloverKeyHandler, false); imageMapEffect.addEventListener(s7sdk.event.RolloverKeyEvent.TARGET_INDEX, rolloverKeyTargetHandler, false); infoPanelPopup = new s7sdk.info.InfoPanelPopup(container, params, "s7infoPanelPopup"); // Attach the PageView, GridView and ImageMapEffect objects to the ControlBar controls.attachView(pageView); controls.attachView(gridView); controls.attachView(imageMapEffect); // Create the ThumbnailPageButton component object thumbnailPageButton = new s7sdk.common.ThumbnailPageButton("s7controls", params, "s7thumbnailButton"); // Create the ThumbnailPageButton component object fullScreenButton = new s7sdk.common.FullScreenButton("s7controls", params, "s7fullScreenButton"); // Hide the ThumbnailGridView by default - this usage will be deprecated, use setCSS() in the following release gridView.getObj().style.visibility = "hidden"; // Add an event listener for PageView selection events pageView.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageViewSelected, false); // Add an event listener for ThumbnailGridView swatch selection events gridView.addEventListener(s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT, onGridViewSwatchSelected, false); window.addEventListener("load", function() { // Add an event listener for ThumbnailPageButton click events thumbnailPageButton.addEventListener("click", onThumbnailPageButton, false); }); // Add an event listener for FullScreenButton click events fullScreenButton.addEventListener("click", onFullScreenButtonClick, false); // Add an event listener for PageScrubber selection events pageScrubber.addEventListener(s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT, onPageScrubberSelected, false); } /* Event handler for s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT events dispatched by PageView to switch pages for PageView item selections. */ function onPageViewSelected(event) { switchToPage(event); } /* Event handler for s7sdk.event.AssetEvent.SWATCH_SELECTED_EVENT events dispatched by ThumbnailGridView to switch pages for ThumbnailGridView swatch selections. */ function onGridViewSwatchSelected(event) { switchToPage(event); } /* Event handler for click events dispatched by ThumbnailPageButton to update the visibility of UI elements. */ function onThumbnailPageButton(event) { updateUI(); alertSomething(); } /* Updates visibility state of different UI elements */ function updateUI() { // show/hide PageView - this usage will be deprecated, use setCSS() in the following release pageView.getObj().style.visibility = thumbnailPageButton.isSelected() ? "hidden" : "inherit"; // show/hide ThumbnailGridView - this usage will be deprecated, use setCSS() in the following release gridView.getObj().style.visibility = thumbnailPageButton.isSelected() ? "inherit" : "hidden"; // show/hide PageScrubber pageScrubber.setCSS("s7pagescrubber", "visibility", (!thumbnailPageButton.isSelected()) ? "inherit" : "hidden"); } function alertSomething() { alert('hi'); } /* Event handler for s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT events dispatched by PageScrubber to switch pages for PageScrubber item selections. */ function onPageScrubberSelected(event) { switchToPage(event); } /* Event handler for click events dispatched by FullScreenButton to switch between normal and full screen modes. */ function onFullScreenButtonClick(event) { if (!container.isFullScreen()) { container.requestFullScreen(); } else { container.cancelFullScreen(); } } // Define an event handler function to activate the InfoPanelPopup for image map rollovers function rolloverKeyHandler(event) { if (event.s7event.rolloverKey != null) { infoPanelPopup.activateRollover(event.s7event.rolloverKey); } } function rolloverKeyTargetHandler(event) { if (event.s7event.frame) { var frameIndex = event.s7event.frame; var orientation = self.getOrientation(); if (orientation == 0 || orientation == 180) { //portrait frameIndex = this.landscapeToPortraitHash[frameIndex]; } pageView.setCurrentFrameIndex(frameIndex); } } /** * Define a function to deal with the popup for image map */ function loadProduct(href) { var new_window = window.open(href); try { new_window.focus(); } catch (err) {} } /* Define a function to update all components to display the currently selected page */ function switchToPage(event) { infoPanelPopup.setItem(event.s7event.asset); pageView.setCurrentFrameIndex(event.s7event.frame); gridView.selectSwatch(event.s7event.frame, true); pageScrubber.setCurrentFrameIndex(event.s7event.frame); // If the ThumbnailGridView is showing, hide it and deselect the ThumbnailPageButton if (thumbnailPageButton.isSelected()) { thumbnailPageButton.setSelected(false); updateUI(); } } /* Add event handler for the s7sdk.Event.SDK_READY event dispatched by the ParameterManager when all modifiers are processed and it is safe to initialize the viewer. */ params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false); /* Initiate configuration initialization of ParameterManager. */ params.init(); /* Event handler for s7sdk.event.ResizeEvent.COMPONENT_RESIZE events dispatched by Container to resize various view components included in this viewer. */ function resizeViewer(event) { pageView.resize(event.s7event.w, event.s7event.h); infoPanelPopup.resize(event.s7event.w, event.s7event.h); gridView.resize(event.s7event.w, event.s7event.h - 40); pageScrubber.resize(event.s7event.w, 55); } /* Event handler for s7sdk.event.ResizeEvent.FULLSCREEN_RESIZE events dispatched by Container to update the appearance of the FullScreenButton. */ function onContainerFullScreen(event) { fullScreenButton.setSelected(container.isFullScreen()); } /* Event handler for the s7sdk.event.AssetEvent.NOTF_SET_PARSED event dispatched by MediaSet to assign the asset to the PageView, PageScrubber and ThumbnailGridView when parsing is complete. */ function onSetParsed(event) { // set media set for various components to display var mediaset = event.s7event.asset; pageView.setMediaSet(event.s7event.asset); pageScrubber.setMediaSet(event.s7event.asset); gridView.setMediaSet(event.s7event.asset); } </script> </body> </html> 

Answer 1

您只需要等待加載頁面和/或初始化您的thumbnailPageButton變量以添加您的監聽器：

window.addEventListener("load", function(){

    var thumbnailPageButton = /* YOUR CODE TO INITIALIZE VARIABLE HERE */

    // Add an event listener for ThumbnailPageButton click events
    thumbnailPageButton.addEventListener("click", onThumbnailPageButton, false);


    /* Event handler for s7sdk.event.AssetEvent.ITEM_SELECTED_EVENT events dispatched by PageView to switch pages 
      for PageView item selections. */
    function onPageViewSelected(event){
        switchToPage(event);
    }

});

Answer 2

我將在“圖像”上以及完整項目/產品中得出結論：

如果您使用已經存在的類，則很簡單：

$('#SearchMain').on('click','.product.result',function(){
    alert('clicked a product');
    // show which one:
   alert( $(this).find('.result-image').find('a').attr('href'));
});

如果您願意，這里有一個滾動容器：

$('#scrollContainer').on('click','a.productBlock',function(){
    alert('clicked a scroll product');
    // show which one:
   alert( $(this).find('img').attr('title'));
});

你仍然面臨着如何處理它的挑戰，但應該讓你開始。

注意：我使用jQuery只是因為它已經在你的頁面上。