diff --git a/src/views/chart/ContentEdit/index.vue b/src/views/chart/ContentEdit/index.vue
index f05912c9..9e6b398e 100644
--- a/src/views/chart/ContentEdit/index.vue
+++ b/src/views/chart/ContentEdit/index.vue
@@ -21,10 +21,10 @@
           :index="index"
           :style="useComponentStyle(item.attr, index)"
           :item="item"
-          @contextmenu="handleContextMenu($event, index)"
           @mousedown="mousedownHandle($event, item)"
           @mouseenter="mouseenterHandle($event, item)"
           @mouseleave="mouseleaveHandle($event, item)"
+          @contextmenu="handleContextMenu($event, index)"
         >
           <component
             class="edit-content-chart"
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index 3c78d4ed..bade06f0 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -20,6 +20,7 @@
       @mousedown="mousedownHandle(item)"
       @mouseenter="mouseenterHandle(item)"
       @mouseleave="mouseleaveHandle(item)"
+      @contextmenu="handleContextMenu($event, index)"
     />
   </ContentBox>
 </template>
@@ -33,6 +34,7 @@ import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayo
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { ChartEditStoreEnum, TargetChartType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { CreateComponentType } from '@/packages/index.d'
+import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
 
 import { ListItem } from './components/ListItem/index'
 import { icon } from '@/plugins'
@@ -40,6 +42,7 @@ import { icon } from '@/plugins'
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStoreStore()
+const { handleContextMenu } = useContextMenu()
 
 const backHandle = () => {
   chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)