回答編集履歴

1

追記

2018/10/12 01:12

投稿

yambejp
yambejp

スコア114581

test CHANGED
@@ -67,3 +67,97 @@
67
67
  </style>
68
68
 
69
69
  ```
70
+
71
+
72
+
73
+ # 追記
74
+
75
+ 動的なオブジェクトに対応
76
+
77
+ ```javascript
78
+
79
+ <script>
80
+
81
+ document.addEventListener("click", function(e){
82
+
83
+ var t=e.target;
84
+
85
+ if(t.p('.box') && t.p('.box').p('#wrapper')){
86
+
87
+ alert('box clicked');
88
+
89
+ }
90
+
91
+ });
92
+
93
+
94
+
95
+ HTMLElement.prototype.p=function(selector){
96
+
97
+ var node=this;
98
+
99
+ do{
100
+
101
+ if ((node.matches || node.msMatchesSelector).call(node, selector)) {
102
+
103
+ return node;
104
+
105
+ }
106
+
107
+ } while ((node = node.parentNode).nodeName!="#document");
108
+
109
+ return null;
110
+
111
+ }
112
+
113
+ </script>
114
+
115
+ <div class="box">
116
+
117
+ <span>box out of wrapper</span>
118
+
119
+ </div>
120
+
121
+ <div id="wrapper">
122
+
123
+ <div class="box">
124
+
125
+ <span>box</span>
126
+
127
+ </div>
128
+
129
+ <div>
130
+
131
+ <span>not box</span>
132
+
133
+ </div>
134
+
135
+ <div class="box">
136
+
137
+ <span>box</span>
138
+
139
+ </div>
140
+
141
+ </div>
142
+
143
+
144
+
145
+ <style type="text/css">
146
+
147
+ .box {
148
+
149
+ background: #DDD;
150
+
151
+ }
152
+
153
+
154
+
155
+ .box span {
156
+
157
+ background: #AAA;
158
+
159
+ }
160
+
161
+ </style>
162
+
163
+ ```