ページスクロールをしたいのにVR埋込部分が拡大してスクロールができない

前提・実現したいこと

Wordpressを使用したWEBサイトの制作をしており、
一部のページキービジュアルに当たる部分に
VRのiframe埋め込みをしております。（余談：widthは画面幅いっぱい、高さは600pxで指定をしています。）
ただ単純にiframeの埋め込みをしてしまうとiframeの表示領域にマウスカーソルがある状態でマウスホイールを使用してスクロールをしようとするとiframe内がズームされてしまい、スクロールの妨げになってしまいます。

スクロールしたい場合にのみiframeの表示領域からマウスカーソルを外せばページスクロールはできますが、使い勝手がよくないため改善したいです。

実現したい内容は下記の通りです。

ページ読み込み後、iframe表示領域にマウスカーソルがある状態でマウスホイールでスクロールをしてもズームされない
iframe表示領域内をクリックした場合、マウスホイールでズームが適用される
iframe表示領域からマウスカーソルが外れた場合に、マウスホイールを使用した場合はページがスクロールされる

試したこと

▼下記はGooglemapですが同じようにズームされるのを防ぐTIPSがありましたのでこちらを試したところ
https://qiita.com/patorash/items/7a5154d276e0f0bb8e1e
しかし、上記内容を適用したところエラーが出てしまい、WEBページも真っ白になってしまいました。

発生している問題・エラーメッセージ

Uncaught SyntaxError: Unexpected token '=>'

jsは理解が乏しいためよくわかっていないのですが単純に不要な記述かと思い
js内の「=>」を削除したところ、ページは表示されるようになりましたが、思った動作ができない状態です。

該当のソースコード

HTML
1<div id="mv">
2  <iframe height='600px' src='URL' frameborder='0' allowfullscreen='true' mozallowfullscreen='true' webkitallowfullscreen='true'></iframe>
3</div>

CSS
1#mv{
2    position:relative;
3    width:100%;
4    height:0;
5    padding-top: 40vw;
6}
7#mv iframe{
8    position:absolute;
9    top:0;
10    left:0;
11    width:100%;
12    height:100%;
13    pointer-events:none;
14}
15#mv iframe .clicked{
16	pointer-events:auto;
17}

js
1$('#mv').click(function(e) {
2  $(this).find('iframe').addClass('clicked');
3}).mouseleave(function(e) => {
4  $(this).find('iframe').removeClass('clicked');
5});

説明がうまくないためわかりづらいかもしれませんが、助けていただけるとありがたいです。

行動規範の内容に同意します

回答1件

JavaScriptの処理はブラウザ上で特定の動作が行われるとiframe要素にclickedクラスを付けたり外したりするものですが、
CSSファイルで.clickedクラスのスタイリングがiframe要素ではなくiframe要素の子要素に対して行われているため、期待通りの動作にならないのかと思われます。

css
1#mv iframe .clicked {
2    pointer-events:auto;
3}

この部分の記述を

css
1#mv iframe.clicked {
2    pointer-events:auto;
3}

このように（iframeと.clickedの間の空白を削除）変更すると正しく動くのではないでしょうか。

2020.08.31 追記

お察しの通りJavaScriptのコードにも構文エラーがあるようです。無名関数の定義の部分でfunnction関数式とアロー関数式が混同されているようです。

JavaScriptのコードを以下のように修正して実行してみてください。

javascript
1$('#mv').click(function(e) {
2  $(this).find('iframe').addClass('clicked');
3}).mouseleave(function(e) {
4  $(this).find('iframe').removeClass('clicked');
5});