diff --git a/examples/main.js b/examples/main.js
index 951c1550..bd729583 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -11,7 +11,8 @@ import locale from '../src/locale/lang/zh-CN';
 
 Vue.use(VueRouter);
 Vue.use(iView, {
-    locale
+    locale,
+    capture: true
 });
 
 // 开启debug模式
diff --git a/examples/routers/poptip.vue b/examples/routers/poptip.vue
index 459fac0c..6f47a8a0 100644
--- a/examples/routers/poptip.vue
+++ b/examples/routers/poptip.vue
@@ -1,87 +1,21 @@
 <template>
-    <div style="margin: 200px">
-        <Tabs value="name1">
-            <TabPane label="标签一" name="name1">
-                <!-- <div style="width: 200px;height:300px;overflow: auto;">
-                    <Poptip title="提示标题" content="标签一的内容" placement="left" transfer >
-                        <Button id="aaa">左边</Button>
-                    </Poptip>
-                    <Poptip title="提示标题" content="标签一的内容" placement="right" transfer>
-                        <Button id="aaa">右边</Button>
-                    </Poptip>
-                    <Poptip title="提示标题" content="标签一的内容" placement="top" transfer>
-                        <Button id="aaa">上边</Button>
-                    </Poptip>
-                    <Poptip title="提示标题" content="标签一的内容" placement="bottom" transfer>
-                        <Button id="aaa">下边</Button>
-                    </Poptip>
-                </div> -->
-                <div>
-                    <Poptip title="提示标题" content="标签一的内容">
-                        <Button id="aaa">点击显示</Button>
-                        <div slot="content">
-                            <Button @click='loadData(15)'>15条数据</Button>
-                            <Button @click='loadData(10)'>10条数据</Button>
-                            <Button @click='loadData(5)'>5条数据</Button>
-                            <Button @click='loadData(3)'>3条数据</Button>
-                            <Table :columns='columns1' :data='data1'>
-                            </Table>
-                        </div>
-                    </Poptip>
-                </div>
-            </TabPane>
-            <TabPane label="标签二" name="name2">标签二的内容</TabPane>
-        </Tabs>
+    <div>
+        <Poptip trigger="hover" title="Title" content="content">
+            <Button>Hover</Button>
+        </Poptip>
+        <Poptip title="Title" content="content">
+            <Button>Click</Button>
+        </Poptip>
+        <Poptip trigger="focus" title="Title" content="content">
+            <Button>Focus</Button>
+        </Poptip>
+        <Poptip trigger="focus" title="Title" content="content">
+            <Input placeholder="Input focus" />
+        </Poptip>
     </div>
 </template>
 <script>
     export default {
-        data () {
-            return {
-                options: {
 
-                },
-                columns1:[
-                    {
-                        title: 'Data1',
-                        key: 'data1',
-                        width: 100,
-                    },
-                    {
-                        title: 'Data2',
-                        key: 'data2',
-                        width: 100
-                    },
-                    {
-                        title: 'Data3',
-                        key: 'data3',
-                        width: 100
-                    },
-                    {
-                        title: 'Data4',
-                        key: 'data4',
-                        width: 100
-                    }
-                ],
-                data1:[],
-            }
-        },
-        created(){
-            this.loadData(5);
-        },
-        methods:{
-            loadData(num){
-                let data = [];
-                for (let i=0; i<num; i++) {
-                    data.push({
-                        data1:Math.random()*1000000,
-                        data2:Math.random()*100000000,
-                        data3:Math.random()*10000000000,
-                        data4:Math.random()*1000000000000,
-                    })
-                }
-                this.data1 = data
-            },
-        }
     }
 </script>
diff --git a/src/components/cascader/cascader.vue b/src/components/cascader/cascader.vue
index 4f981898..75e9ee02 100644
--- a/src/components/cascader/cascader.vue
+++ b/src/components/cascader/cascader.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="classes" v-click-outside="handleClose">
+    <div :class="classes" v-click-outside:[capture]="handleClose">
         <div :class="[prefixCls + '-rel']" @click="toggleOpen" ref="reference">
             <input type="hidden" :name="name" :value="currentValue">
             <slot>
@@ -58,7 +58,7 @@
     import Drop from '../select/dropdown.vue';
     import Icon from '../icon/icon.vue';
     import Caspanel from './caspanel.vue';
-    import {directive as clickOutside} from 'v-click-outside-x';
+    import {directive as clickOutside} from '../../directives/v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
@@ -142,6 +142,13 @@
             },
             elementId: {
                 type: String
+            },
+            // 4.0.0
+            capture: {
+                type: Boolean,
+                default () {
+                    return !this.$IVIEW ? true : this.$IVIEW.capture;
+                }
             }
         },
         data () {
diff --git a/src/components/color-picker/color-picker.vue b/src/components/color-picker/color-picker.vue
index 9e7468d1..bc97cbd3 100644
--- a/src/components/color-picker/color-picker.vue
+++ b/src/components/color-picker/color-picker.vue
@@ -1,6 +1,6 @@
 <template>
     <div
-        v-click-outside="handleClose"
+        v-click-outside:[capture]="handleClose"
         :class="classes">
         <div
             ref="reference"
@@ -116,7 +116,7 @@
 
 <script>
 import tinycolor from 'tinycolor2';
-import {directive as clickOutside} from 'v-click-outside-x';
+import {directive as clickOutside} from '../../directives/v-click-outside-x';
 import TransferDom from '../../directives/transfer-dom';
 import Drop from '../../components/select/dropdown.vue';
 import RecommendColors from './recommend-colors.vue';
@@ -222,6 +222,13 @@ export default {
             type: Boolean,
             default: true
         },
+        // 4.0.0
+        capture: {
+            type: Boolean,
+            default () {
+                return !this.$IVIEW ? true : this.$IVIEW.capture;
+            }
+        }
     },
 
     data() {
diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index 138f5609..dc5e5aee 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         :class="[prefixCls]"
-        v-click-outside="onClickoutside"
+        v-click-outside:[capture]="onClickoutside"
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave">
         <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
@@ -21,7 +21,7 @@
 </template>
 <script>
     import Drop from '../select/dropdown.vue';
-    import {directive as clickOutside} from 'v-click-outside-x';
+    import {directive as clickOutside} from '../../directives/v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf, findComponentUpward } from '../../utils/assist';
 
@@ -61,6 +61,13 @@
                 type: Boolean,
                 default: false
             },
+            // 4.0.0
+            capture: {
+                type: Boolean,
+                default () {
+                    return !this.$IVIEW ? true : this.$IVIEW.capture;
+                }
+            }
         },
         computed: {
             transition () {
diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue
index 333a0428..8f76f59c 100644
--- a/src/components/poptip/poptip.vue
+++ b/src/components/poptip/poptip.vue
@@ -3,7 +3,7 @@
         :class="classes"
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave"
-        v-click-outside="handleClose">
+        v-click-outside:[capture]="handleClose">
         <div
             :class="[prefixCls + '-rel']"
             ref="reference"
@@ -49,7 +49,7 @@
 <script>
     import Popper from '../base/popper';
     import iButton from '../button/button.vue';
-    import {directive as clickOutside} from 'v-click-outside-x';
+    import {directive as clickOutside} from '../../directives/v-click-outside-x';
     import TransferDom from '../../directives/transfer-dom';
     import { oneOf } from '../../utils/assist';
     import { transferIndex, transferIncrease } from '../../utils/transfer-queue';
@@ -116,6 +116,13 @@
             disabled: {
                 type: Boolean,
                 default: false
+            },
+            // 4.0.0
+            capture: {
+                type: Boolean,
+                default () {
+                    return !this.$IVIEW ? true : this.$IVIEW.capture;
+                }
             }
         },
         data () {