[{"data":1,"prerenderedAt":636},["ShallowReactive",2],{"navigation":3,"/events/click-events":238,"/events/click-events-surround":631},[4,22,55,88,105,138,159,180,217],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":6},"Getting Started",false,"/getting-started","01.getting-started",[10,14,18],{"title":11,"path":12,"stem":13},"Introduction","/getting-started/introduction","01.getting-started/1.introduction",{"title":15,"path":16,"stem":17},"Installation","/getting-started/installation","01.getting-started/2.installation",{"title":19,"path":20,"stem":21},"Quick Start","/getting-started/quick-start","01.getting-started/3.quick-start",{"title":23,"path":24,"stem":25,"children":26,"page":6},"Configuration","/configuration","02.configuration",[27,31,35,39,43,47,51],{"title":28,"path":29,"stem":30},"Overview","/configuration/overview","02.configuration/1.overview",{"title":32,"path":33,"stem":34},"Size","/configuration/size","02.configuration/2.size",{"title":36,"path":37,"stem":38},"Shape","/configuration/shape","02.configuration/3.shape",{"title":40,"path":41,"stem":42},"Positioning","/configuration/positioning","02.configuration/4.positioning",{"title":44,"path":45,"stem":46},"Placement","/configuration/placement","02.configuration/5.placement",{"title":48,"path":49,"stem":50},"Video","/configuration/video","02.configuration/6.video",{"title":52,"path":53,"stem":54},"Styles","/configuration/styles","02.configuration/7.styles",{"title":56,"path":57,"stem":58,"children":59,"page":6},"Components","/components","03.components",[60,64,68,72,76,80,84],{"title":61,"path":62,"stem":63},"Container","/components/container","03.components/1.container",{"title":65,"path":66,"stem":67},"Close Button","/components/close-button","03.components/2.close-button",{"title":69,"path":70,"stem":71},"CTA Button","/components/cta-button","03.components/3.cta-button",{"title":73,"path":74,"stem":75},"Video Controls","/components/video-controls","03.components/4.video-controls",{"title":77,"path":78,"stem":79},"Video Loader","/components/video-loader","03.components/5.video-loader",{"title":81,"path":82,"stem":83},"Video Progress","/components/video-progress","03.components/6.video-progress",{"title":85,"path":86,"stem":87},"Video Volume","/components/video-volume","03.components/7.video-volume",{"title":89,"path":90,"stem":91,"children":92,"page":6},"Features","/features","04.features",[93,97,101],{"title":94,"path":95,"stem":96},"Preview","/features/preview","04.features/1.preview",{"title":98,"path":99,"stem":100},"Visibility","/features/visibility","04.features/2.visibility",{"title":102,"path":103,"stem":104},"Responsive","/features/responsive","04.features/3.responsive",{"title":106,"path":107,"stem":108,"children":109,"page":6},"API Reference","/api-reference","05.api-reference",[110,114,118,122,126,130,134],{"title":111,"path":112,"stem":113},"useScena","/api-reference/use-scena","05.api-reference/1.use-scena",{"title":115,"path":116,"stem":117},"useConfig","/api-reference/use-config","05.api-reference/2.use-config",{"title":119,"path":120,"stem":121},"Scena Instance","/api-reference/scena-instance","05.api-reference/3.scena-instance",{"title":123,"path":124,"stem":125},"Video Controller","/api-reference/video-controller","05.api-reference/4.video-controller",{"title":127,"path":128,"stem":129},"Video State","/api-reference/video-state","05.api-reference/5.video-state",{"title":131,"path":132,"stem":133},"Visibility API","/api-reference/visibility-api","05.api-reference/6.visibility-api",{"title":135,"path":136,"stem":137},"Preview API","/api-reference/preview-api","05.api-reference/7.preview-api",{"title":139,"path":140,"stem":141,"children":142,"page":6},"Events","/events","06.events",[143,147,151,155],{"title":144,"path":145,"stem":146},"Widget Events","/events/widget-events","06.events/1.widget-events",{"title":148,"path":149,"stem":150},"Video Events","/events/video-events","06.events/2.video-events",{"title":152,"path":153,"stem":154},"Feature Events","/events/feature-events","06.events/3.feature-events",{"title":156,"path":157,"stem":158},"Click Events","/events/click-events","06.events/4.click-events",{"title":160,"path":161,"stem":162,"children":163,"page":6},"Custom Element","/custom-element","07.custom-element",[164,168,172,176],{"title":165,"path":166,"stem":167},"Setup","/custom-element/setup","07.custom-element/1.setup",{"title":169,"path":170,"stem":171},"Usage","/custom-element/usage","07.custom-element/2.usage",{"title":173,"path":174,"stem":175},"DOM Events","/custom-element/events","07.custom-element/3.events",{"title":177,"path":178,"stem":179},"Integration","/custom-element/integration","07.custom-element/4.integration",{"title":181,"path":182,"stem":183,"children":184,"page":6},"Examples","/examples","08.examples",[185,189,193,197,201,205,209,213],{"title":186,"path":187,"stem":188},"Basic Setup","/examples/basic-setup","08.examples/1.basic-setup",{"title":190,"path":191,"stem":192},"Custom Styling","/examples/custom-styling","08.examples/2.custom-styling",{"title":194,"path":195,"stem":196},"Responsive Widget","/examples/responsive-widget","08.examples/3.responsive-widget",{"title":198,"path":199,"stem":200},"Custom Controls","/examples/custom-controls","08.examples/4.custom-controls",{"title":202,"path":203,"stem":204},"Viewport Mount","/examples/viewport-mount","08.examples/5.viewport-mount",{"title":206,"path":207,"stem":208},"Timed Overlay","/examples/timed-overlay","08.examples/6.timed-overlay",{"title":210,"path":211,"stem":212},"Loop Segment","/examples/loop-segment","08.examples/7.loop-segment",{"title":214,"path":215,"stem":216},"Heatmap Data","/examples/heatmap-data","08.examples/8.heatmap-data",{"title":218,"path":219,"stem":220,"children":221,"page":6},"Distribution","/distribution","09.distribution",[222,226,230,234],{"title":223,"path":224,"stem":225},"Formats","/distribution/formats","09.distribution/1.formats",{"title":227,"path":228,"stem":229},"Browser Support","/distribution/browser-support","09.distribution/2.browser-support",{"title":231,"path":232,"stem":233},"Bundle Size","/distribution/bundle-size","09.distribution/3.bundle-size",{"title":235,"path":236,"stem":237},"TypeScript","/distribution/typescript","09.distribution/4.typescript",{"id":239,"title":156,"body":240,"description":625,"extension":626,"links":627,"meta":628,"navigation":377,"path":157,"seo":629,"stem":158,"__hash__":630},"docs/06.events/4.click-events.md",{"type":241,"value":242,"toc":621},"minimark",[243,252,256,324,327,617],[244,245,246,247,251],"p",{},"Click events fire when the user clicks on a widget element. Each handler receives the native DOM ",[248,249,250],"code",{},"MouseEvent",", which can be used to inspect the target element, cursor position, or modifier keys.",[253,254,139],"h2",{"id":255},"events",[257,258,259,275],"table",{},[260,261,262],"thead",{},[263,264,265,269,272],"tr",{},[266,267,268],"th",{},"Event",[266,270,271],{},"String value",[266,273,274],{},"When",[276,277,278,294,309],"tbody",{},[263,279,280,286,291],{},[281,282,283],"td",{},[248,284,285],{},"ON_VIDEO_CONTAINER_CLICK",[281,287,288],{},[248,289,290],{},"video-container:click",[281,292,293],{},"User clicks the video container",[263,295,296,301,306],{},[281,297,298],{},[248,299,300],{},"ON_CTA_CLICK",[281,302,303],{},[248,304,305],{},"cta:click",[281,307,308],{},"User clicks the CTA button",[263,310,311,316,321],{},[281,312,313],{},[248,314,315],{},"ON_CLOSE_CLICK",[281,317,318],{},[248,319,320],{},"close:click",[281,322,323],{},"User clicks the close button",[253,325,169],{"id":326},"usage",[328,329,334],"pre",{"className":330,"code":331,"language":332,"meta":333,"style":333},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { ScenaEvent } from '@retoo/scena';\n\ninstance.api.events.on(ScenaEvent.ON_VIDEO_CONTAINER_CLICK, (event) => {\n  console.log('Video container clicked');\n});\n\ninstance.api.events.on(ScenaEvent.ON_CTA_CLICK, (event) => {\n  window.open('https://example.com', '_blank');\n});\n\ninstance.api.events.on(ScenaEvent.ON_CLOSE_CLICK, (event) => {\n  console.log('Close button clicked');\n});\n","ts","",[248,335,336,372,379,428,454,464,469,504,537,546,551,586,608],{"__ignoreMap":333},[337,338,341,345,349,353,356,359,362,366,369],"span",{"class":339,"line":340},"line",1,[337,342,344],{"class":343},"s7zQu","import",[337,346,348],{"class":347},"sMK4o"," {",[337,350,352],{"class":351},"sTEyZ"," ScenaEvent",[337,354,355],{"class":347}," }",[337,357,358],{"class":343}," from",[337,360,361],{"class":347}," '",[337,363,365],{"class":364},"sfazB","@retoo/scena",[337,367,368],{"class":347},"'",[337,370,371],{"class":347},";\n",[337,373,375],{"class":339,"line":374},2,[337,376,378],{"emptyLinePlaceholder":377},true,"\n",[337,380,382,385,388,391,393,395,397,401,404,406,408,411,414,418,421,425],{"class":339,"line":381},3,[337,383,384],{"class":351},"instance",[337,386,387],{"class":347},".",[337,389,390],{"class":351},"api",[337,392,387],{"class":347},[337,394,255],{"class":351},[337,396,387],{"class":347},[337,398,400],{"class":399},"s2Zo4","on",[337,402,403],{"class":351},"(ScenaEvent",[337,405,387],{"class":347},[337,407,285],{"class":351},[337,409,410],{"class":347},",",[337,412,413],{"class":347}," (",[337,415,417],{"class":416},"sHdIc","event",[337,419,420],{"class":347},")",[337,422,424],{"class":423},"spNyl"," =>",[337,426,427],{"class":347}," {\n",[337,429,431,434,436,439,443,445,448,450,452],{"class":339,"line":430},4,[337,432,433],{"class":351},"  console",[337,435,387],{"class":347},[337,437,438],{"class":399},"log",[337,440,442],{"class":441},"swJcz","(",[337,444,368],{"class":347},[337,446,447],{"class":364},"Video container clicked",[337,449,368],{"class":347},[337,451,420],{"class":441},[337,453,371],{"class":347},[337,455,457,460,462],{"class":339,"line":456},5,[337,458,459],{"class":347},"}",[337,461,420],{"class":351},[337,463,371],{"class":347},[337,465,467],{"class":339,"line":466},6,[337,468,378],{"emptyLinePlaceholder":377},[337,470,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502],{"class":339,"line":471},7,[337,473,384],{"class":351},[337,475,387],{"class":347},[337,477,390],{"class":351},[337,479,387],{"class":347},[337,481,255],{"class":351},[337,483,387],{"class":347},[337,485,400],{"class":399},[337,487,403],{"class":351},[337,489,387],{"class":347},[337,491,300],{"class":351},[337,493,410],{"class":347},[337,495,413],{"class":347},[337,497,417],{"class":416},[337,499,420],{"class":347},[337,501,424],{"class":423},[337,503,427],{"class":347},[337,505,507,510,512,515,517,519,522,524,526,528,531,533,535],{"class":339,"line":506},8,[337,508,509],{"class":351},"  window",[337,511,387],{"class":347},[337,513,514],{"class":399},"open",[337,516,442],{"class":441},[337,518,368],{"class":347},[337,520,521],{"class":364},"https://example.com",[337,523,368],{"class":347},[337,525,410],{"class":347},[337,527,361],{"class":347},[337,529,530],{"class":364},"_blank",[337,532,368],{"class":347},[337,534,420],{"class":441},[337,536,371],{"class":347},[337,538,540,542,544],{"class":339,"line":539},9,[337,541,459],{"class":347},[337,543,420],{"class":351},[337,545,371],{"class":347},[337,547,549],{"class":339,"line":548},10,[337,550,378],{"emptyLinePlaceholder":377},[337,552,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584],{"class":339,"line":553},11,[337,555,384],{"class":351},[337,557,387],{"class":347},[337,559,390],{"class":351},[337,561,387],{"class":347},[337,563,255],{"class":351},[337,565,387],{"class":347},[337,567,400],{"class":399},[337,569,403],{"class":351},[337,571,387],{"class":347},[337,573,315],{"class":351},[337,575,410],{"class":347},[337,577,413],{"class":347},[337,579,417],{"class":416},[337,581,420],{"class":347},[337,583,424],{"class":423},[337,585,427],{"class":347},[337,587,589,591,593,595,597,599,602,604,606],{"class":339,"line":588},12,[337,590,433],{"class":351},[337,592,387],{"class":347},[337,594,438],{"class":399},[337,596,442],{"class":441},[337,598,368],{"class":347},[337,600,601],{"class":364},"Close button clicked",[337,603,368],{"class":347},[337,605,420],{"class":441},[337,607,371],{"class":347},[337,609,611,613,615],{"class":339,"line":610},13,[337,612,459],{"class":347},[337,614,420],{"class":351},[337,616,371],{"class":347},[618,619,620],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":333,"searchDepth":340,"depth":374,"links":622},[623,624],{"id":255,"depth":374,"text":139},{"id":326,"depth":374,"text":169},"Handle user clicks on the video container, CTA button, and close button.","md",null,{},{"title":156,"description":625},"1Tiwj1ey2r1v1uhgvNbHegXErRaHB5YCzow261g1BTk",[632,634],{"title":152,"path":153,"stem":154,"description":633,"children":-1},"React to visibility and preview state changes with show, hide, start, and stop events.",{"title":165,"path":166,"stem":167,"description":635,"children":-1},"Register the custom element with defineScenaElement() and connect styles.",1777984323735]