diff --git a/__tests__/snapshot/core/examples/test/elements.html.jpg b/__tests__/snapshot/core/examples/test/elements.html.jpg
index d2a87a3..27376a6 100644
Binary files a/__tests__/snapshot/core/examples/test/elements.html.jpg and b/__tests__/snapshot/core/examples/test/elements.html.jpg differ
diff --git a/packages/core/examples/test/elements.html b/packages/core/examples/test/elements.html
index f12138e..c6672cd 100644
--- a/packages/core/examples/test/elements.html
+++ b/packages/core/examples/test/elements.html
@@ -61,6 +61,15 @@
       <div class="box" id="mount-6">
         <div class="title">HTML</div>
       </div>
+      <div class="box" id="mount-7">
+        <div class="title">Element: click selected</div>
+      </div>
+      <div class="box" id="mount-8">
+        <div class="title">Element: lock</div>
+      </div>
+      <div class="box" id="mount-9">
+        <div class="title">Element: invisible</div>
+      </div>
     </div>
 
     <script src="./../../dist/index.global.js"></script>
@@ -373,5 +382,126 @@
         });
       })();
     </script>
+
+    <script type="module">
+      import event from './../../../../scripts/browser/event.js';
+      (function() {
+        const mount = document.querySelector('#mount-7');
+        const core = new Core(mount, opts, config);
+        core.addElement({
+          name: "rect-001",
+          x: 20,
+          y: 20,
+          w: 200,
+          h: 60,
+          type: "rect",
+          desc: {
+            color: "#c6e0f5",
+            borderRadius: 8,
+            borderWidth: 2,
+            borderColor: "#2196f3",
+          },
+        })
+        core.addElement({
+          name: "rect-002",
+          x: 50,
+          y: 100,
+          w: 200,
+          h: 80,
+          type: "rect",
+          desc: {
+            color: "#c6e0f5",
+            borderRadius: 8,
+            borderWidth: 2,
+            borderColor: "#2196f3",
+          },
+        });
+        setTimeout(() => {
+          event.mouseDown({ x: 100, y: 560 })
+        }, 100);
+      })();
+    </script>
+
+    <script type="module">
+      import event from './../../../../scripts/browser/event.js';
+      (function() {
+        const mount = document.querySelector('#mount-8');
+        const core = new Core(mount, opts, config);
+        core.addElement({
+          name: "rect-001",
+          x: 20,
+          y: 20,
+          w: 200,
+          h: 60,
+          lock: true,
+          type: "rect",
+          desc: {
+            color: "#c6e0f5",
+            borderRadius: 8,
+            borderWidth: 2,
+            borderColor: "#2196f3",
+          },
+        })
+        core.addElement({
+          name: "rect-002",
+          x: 50,
+          y: 100,
+          w: 200,
+          h: 80,
+          type: "rect",
+          desc: {
+            color: "#c6e0f5",
+            borderRadius: 8,
+            borderWidth: 2,
+            borderColor: "#2196f3",
+          },
+        });
+        setTimeout(() => {
+          event.mouseDown({ x: 340, y: 560 })
+        }, 100);
+      })();
+    </script>
+
+    <script type="module">
+      import event from './../../../../scripts/browser/event.js';
+      (function() {
+        const mount = document.querySelector('#mount-9');
+        const core = new Core(mount, opts, config);
+        core.addElement({
+          name: "rect-001",
+          x: 20,
+          y: 20,
+          w: 200,
+          h: 60,
+          invisible: true,
+          type: "rect",
+          desc: {
+            color: "#c6e0f5",
+            borderRadius: 8,
+            borderWidth: 2,
+            borderColor: "#2196f3",
+          },
+        })
+        core.addElement({
+          name: "rect-002",
+          x: 50,
+          y: 100,
+          w: 200,
+          h: 80,
+          type: "rect",
+          desc: {
+            color: "#c6e0f5",
+            borderRadius: 8,
+            borderWidth: 2,
+            borderColor: "#2196f3",
+          },
+        });
+        setTimeout(() => {
+          event.mouseDown({ x: 340, y: 560 })
+        }, 100);
+      })();
+    </script>
+
+  
   </body>
 </html>
\ No newline at end of file
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index de44c4a..b189a7f 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -295,7 +295,7 @@ class Core {
         this[_tempData].set('selectedUUID', uuid);
       } else {
         const [index, uuid] = this[_element].isPointInElement(point, this[_data]);
-        if (index >= 0) {
+        if (index >= 0 && this[_data].elements[index]?.invisible !== true) {
           // Controll Element
           this.selectElementByIndex(index, { useMode: true });
           if (typeof uuid === 'string' && this[_coreEvent].has('screenSelectElement')) {
diff --git a/scripts/screen.config.js b/scripts/screen.config.js
index d69a4cd..0b1e758 100644
--- a/scripts/screen.config.js
+++ b/scripts/screen.config.js
@@ -3,8 +3,8 @@ const pageList = [
   { path: 'board/examples/test/scale.html', w: 930, h: 540, delay: 500 },
   { path: 'board/examples/test/scroll.html', w: 620, h: 270, delay: 500 },
   { path: 'board/examples/test/event.html', w: 620, h: 270, delay: 500 },
-  { path: 'core/examples/test/elements.html', w: 930, h: 540, delay: 500 },
-  { path: 'core/examples/test/api.html', w: 930, h: 1300, delay: 1000 },
+  { path: 'core/examples/test/elements.html', w: 930, h: 820, delay: 800 },
+  { path: 'core/examples/test/api.html', w: 930, h: 1300, delay: 800 },
 ]
 
 module.exports = {